I'm just messing around learning about JavaScript and I wanted to change the color of my background by resting my mouse over a link. Really I just want to learn about onMouseOver. I have:
Visit W3Schools
I tried applying this to radio buttons too that would change the bg color onclick, however If I wanted a preview of the color (by using onMouseOver) that part didn't work as it doesn't with the above.
Is the solution so obvious I'm overlooking it? Thanks for any help.
No, it's not obvious. JavaScript is not so easy to handle. And you have to learn the types and names of the objects you can use in JavaScript.
The object document does not have a element bgcolor
What you are trying is to change the CSS-style of the element body of the document
document.body.style.backgroundColor = 'lightgreen';
One could do it by using the document object model (DOM) which is what you tried, but you have to respect the case. the correct form of the document's attribute is bgColor not bgcolor (Capital letter C).
// bad style
document.bgColor = 'lightgreen';
But it is not advisable. Why?
document is a part of the Document Object Model (DOM) and therefore
mostly responsible for the data and the structure of the ... well
... document. The bgColor attribute of document maybe a relic of
the dark HTML medieval, the pre CSS times.
The document should contain the data, and not the representation (aka style) of the data. That what the style attribute of every DOM element is for.
You can overrule the bgColor of the document simply by giving the body a CSS style for background-color. The document still has the bgColor attribute and the value, but what you see is the value of the CSS style
onmouseover needs to be all lower-case onmouseover and it needs to equal a function (object.onmouseover=function(){//some code...} if in its own file and onmouseover="functionName()" if inline)
Here's an example: updated http://jsfiddle.net/TH2u3/1/
the following works:
<!DOCTYPE html>
<html>
<head>
<script>
var p = {
onload: function() {
var a = document.getElementsByTagName("a")[0];
a.onmouseover = function() {
document.body.style.backgroundColor = "blue";
};
a.onmouseout = function() {
document.body.style.backgroundColor = "green";
};
}
};
</script>
</head>
<body onload="p.onload()">
Visit W3Schools
</body>
Related
I want to change the design of my site by changing the CSS file attached. I have tried with script when the link is with id "link"
var x = document.getElementByID ("link")
X.href = style2
It didn't work.
The other thing I tried was to hide the <link> tag which had class "linkclass"
<style>
link.linkclass {
visibility:hidden;
}
</style>
But it didn't work either.
Can someone help.
Sorry if the code is bad formatted but I can't get how to format code in stack overflow
Three things wrong with this:
javascript is case sensitive. That means X is a different variable than x
style2 is not a valid URL. You have to use an URL to an existing .css file
<link> is not a visible element. Hiding an element that isn't visible in the first place accomplishes nothing.
This works:
var x = document.getElementByID("link");
x.href = "http://url/to/your/style2.css";
// ^ notice the lowercase x
If you wanna hide element (I got that impression from your examples), your javascript code should look like this:
var x = document.getElementById("link");
x.style.display = 'none';
Also take care with following:
-uppercase letters getElementbyId
-you're missing semicolon (;) after first expression
-your variable "x" is uppercase in second row("X").
In most cases this should be enough to disable element with CSS, just add this class (linkclass) to element which you want to hide:
<style>
.linkclass {
display: none;
}
</style>
You could do
$("#link").disabled = true;
This may also work.
document.getElementByID("link").disabled = true;
There is also another Stack question that addresses this here. Removing or Replacing a Stykesheet
update
You say you are trying to change the stylesheet. You could create a function to do it like this.
function styleSheetSwitcher( newFile ){
$("#link").prop("href", newFile);
}
styleSheetSwitcher("myNewCss.css");
Is possible change color of background my div using JavaScript without using ID? And how?
Html code is:
<div class="post" onmouseover="test(this)">
JS code is:
function test(item){
alert("Hi :-)");
}
Have you tried
function test(item){
item.style.backgroundColor = "red";
}
Since item is the actual div you're triggering this event on you won't need an ID to style the element.
A really easy (inline) solution would be the one below.
<div class="post" onmouseover="javascript:style.backgroundColor = 'red';">
Content blabla
</div>
I would personally rather do all of this inside a JS file but hey this works too.
You can loop through the DOM with JavaScript, but you'll have a better time of it if you're using JQuery. You'll want to invest some time learning about selectors:
http://api.jquery.com/category/selectors/
http://www.w3schools.com/jquery/jquery_ref_selectors.asp.
You'll be looking for something like:
function test(){
var element = $('div');
}
As people have shared in the comments, without a unique identifier, you'll have a rough time, especially as new elements are added to the page.
I need some JavaScript to find the default link color of a page. How do I do it? I looked around but not sure how to do it. I believe jQuery has a .css function I can use but how about regular JavaScript?
Please note I don't have any specific element to target to grab css from, i.e. I can't look for the a color value for #myID -- I need to find the default a color value for the links on the page.
Thanks!
Try: Just place an <a> at the top of your page. This will get the values from the first <a> element.
Without any pseudo elements
window.getComputedStyle(document.body.getElementsByTagName('a')[0], null).getPropertyValue("color");
active
window.getComputedStyle(document.body.getElementsByTagName('a')[0], ':active').getPropertyValue("color");
hover
window.getComputedStyle(document.body.getElementsByTagName('a')[0], ':hover').getPropertyValue("color");
If you have any fears, just go with:
var el = document.createElement('a'); // Creates <a>
document.body.appendChild(el);
var COLOR = window.getComputedStyle(el).getPropertyValue("color");
document.body.removeChild(el);
You can create an element and add it to html, then get the CSS properties of the element that is assigned by default. Example:
var element = document.createElement('a');
document.documentElement.appendChild(element);
var color = getComputedStyle(element).color;
console.log(color) //rgb(0, 119, 204) stackoverflow default link color
Try this on StackOverflow page, opening the console.
Demo
I want to change the color of a title when a button is clicked.
This is my code, but it's not working and I can't figure out why not...
var about;
function init() {
about = document.getElementById("about").innerHTML;
about.style.color = 'blue';
}
<div id="about">About Snakelane</div>
<input type="image" src="http://www.blakechris.com/snakelane/assets/about.png" onclick="init()" id="btn">
You set the style per element and not by its content:
function init() {
document.getElementById("about").style.color = 'blue';
}
With innerHTML you get/set the content of an element. So if you would want to modify your title, innerHTML would be the way to go.
In your case, however, you just want to modify a property of the element (change the color of the text inside it), so you address the style property of the element itself.
use ONLY
function init() {
about = document.getElementById("about");
about.style.color = 'blue';
}
.innerHTML() sets or gets the HTML syntax describing the element's descendants., All you need is an object here.
Demo
Try below code:
$(document).ready(function(){
$('#about').css({'background-color':'black'});
});
http://jsfiddle.net/jPCFC/
innerHTML is a string representing the contents of the element.
You want to modify the element itself. Drop the .innerHTML part.
This is probably very easy/obvious.
I'm writing a Chrome extention.
My Javascript catches the text nodes from any site and changes part of the text to something else. I would like to mark the changed text by changing its color (adding tags).
return "<font color = \"FF0000\">"+a+"</font>"
And the result:
<font color = "FF0000">SomeText</font>
But all I want of course is that the SomeText will appear in red.
I recommend you use CSS in your chrome extension. so my solution would involve giving the DOM element (for your instance maybe its a paragraph or a span) a class. It's not good conventions to put style attributes in your HTML markup.
<p class="red">SomeText</p>
And in your CSS file
.red {
color: #ff0000 /* I actually love this color */
}
So how does this use JavaScript?
Instead of adding the styles directly into the HTML tag, you can instead add a class to an element.
document.getElementByTagName("p").className = "red";
Or if you want to target a specific ID
document.getElementById("object").className = "red";
And that text will be red. And since you can add the red class to any class attribute for any object in the DOM, your code will look cleaner than throwing styles everywhere.
I hope this helps you out. Let me know if otherwise.
function newText(tag, text, style) {
var element = document.createElement(tag); //this creates an empty node of the type specified
element.appendChild(document.createTextNode(text)); //this creates a new text node and inserts it into our empty node
if (style) element.setAttribute('style', style); //this sets the style in inline CSS (warning, this needs different syntax in IE)
return element; //this returns a DOM object
}
This will return a DOM object, and you will need to append it to another node.
var myText = newText('p', 'This is some text!', 'color: red;');
document.getElementById('myTextBox').appendChild(myText);
You need to add color in your style sheet...
Like <input type="text" style="color:red" value="sometext"/>.