I need to change more than one style attribute for a given element. I know how to change one: document.getElementById(today).style.visibility= "visible";
but am unsure of the syntax for changing more than one e.g. visibility,width, height and font-color.
Add a comment
|
4 Answers
It's just multiple calls:
document.getElementById(today).style.visibility = "visible";
document.getElementById(today).style.color = "red";
document.getElementById(today).style.height = "5em";
2 Comments
Dave
Awesome thanks. Next trick is one of the attributes that I am changing is font-size but it doesn't seem to like the "-" in document.getElementById(today).style.font-size= "x-small";
Christian C. Salvadó
@Dave, for CSS properties that have contain dashes, you have to remove the dash, and uppercase the next character, i.e.: for
font-size, you should use fontSize.If you are willing to replace any other inline styles for that element you can use the style.cssText property.
document.getElementById('idstring').style.cssText=
'font-size:1em;color:blue;visibility:visible';
Comments
You need to reference each attribute one at a time, i.e. .style.width=, .style.height=, etc.
You could shorten the amount of typing you do a bit like so:
var g = document.getElementById(today);
g.style.width=100;
g.style.height=100;
g.style.visibility='visible';
Comments
CSS way would be to create a class that does all the styling common to those elements and assign the class attribute to them,
alternatively, if they are inhertiable styles then put the elements in a common parent say div and set the div's style
