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.

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.

• javascript
• coding-style

4 Answers 4

It's just multiple calls:

document.getElementById(today).style.visibility = "visible";
document.getElementById(today).style.color = "red";
document.getElementById(today).style.height = "5em";

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';

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';

CSS way would be to create a class that does all the styling mon to those elements and assign the class attribute to them,

alternatively, if they are inhertiable styles then put the elements in a mon parent say div and set the div's style