Hey all,
My knowledge of JavaScript is limited and I’m working on expanding it. At this point I’m working on changing style attributes for a div, and am wondering how to change the value for the “background-color”.
box = document.getElementById('intputBox');
box.style.backgound-color = "#FF0000";
Of course, I’m receiving an error about the operand being on the wrong side of the equals sign.
How can this be done?
box = document.getElementById(‘intputBox’);
box.style.background = ‘#FF0000’;
Much thanks!
I thought the attribute name had to match the method (or whatever it is called) in the JS…
If you are looking to create text boxes that change when you are focusing on them you can use the following script
<script type="text/javascript" language="javascript">
var inputs = new Array();
changeBg = function(){
this.style.background = '#cccccc';
}
revertBg = function(){
this.style.background = '#ffffff';
}
init = function(){
inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
inputs[i].onfocus = changeBg;
inputs[i].onblur = revertBg;
}
}
window.onload = init;
</script>
element.style.background is a CSS shorthand property.
You should use:
[B]element.style.[U]backgroundColor[/U] = '#FFCC00';[/B]
if all you want to change is the color of the background.
It might not seem like a big deal for background color, but when you start using CSS shorthand properties to change only one element of a style for other elements, it can create larger problems… the other elements you don’t define are reset to their default.
For instance, let’s say you have a List Item with the CSS:
li {list-style-position:inside; list-style-type:circle}
Then you want to change a certain LI to a disc, you can enter:
// Poor Method
[B]element.style.listStyle = 'disc';[/B]
// Better Method
[B]element.style.listStyleType = 'disc';[/B]
Both of these will change the list tye to a disc, however the first one will also reset the list-style-position from the CSS to outside (the default) because list-style is the shorthand property and you did not specifiy a new style position.
The second method will only change what you want to change.
It doesn’t really matter for background, because all the other values for the shorthand are for image placement and repeat, and if you don’t have an image as a background then the dafaults won’t matter much, but it’s a good practice to get into.
Am I to understand then, that hyphenated property names can be written like this:
background-color = backgroundColor
font-family = fontFamily
font-weight = fontWeight
etc…
?
That’s true, there are a couple exception. One off the top of my head is float.
That being written as element.style.cssFloat or styleFloat for some browsers…
Aother exception is that class becomes className.
These are because float and class are Javascript reserved words.
Sweet, everyone! Thanks so much!