changing element styles in real time

[brothercake]

I'm using sliders to change text colour dynamically; at the moment, I'm doing it by iterating through the getElementsByTagName collection; like

paraAry = document.getElementsByTagName("p");
paraLen=paraAry.length;
for(j=0;j<paraLen;j++){
	paraAry[j].style.color = "rgb("+bodyColor[0]+","+bodyColor[1]+","+bodyColor[2]+")";
	paraAry[j].style.borderColor = "rgb("+textColor[0]+","+textColor[1]+","+textColor[2]+")";
	paraAry[j].style.backgroundColor = "rgb("+textColor[0]+","+textColor[1]+","+textColor[2]+")";
	}

But blatantly it's well inefficient; is there a better way to achieve this - like just a single property I can change to make all elements of a given name change.

[jkd]

Yes, and it is called DOM2 CSS.

Let's say you have a selector like so:

.myP {
/* styles for special paragraph elements of whatever */
}

And also assume that it is in the very first stylesheet on the page (you could always adjust the index number of course appropriately):

var rules = document.styleSheets.item(0).cssRules;
var pClass;
for (var i = 0; i < rules.length; i++) {
if (rules.item(i).type == CSSRule.STYLE_RULE && rules.item(i).selectorText == '.myP') {
pClass = rules.item(i);
break;
}
}

Now, you can just go like:

pClass.style.backgroundColor = 'red';

and it will dynamically modify the style rule, which in turn affects all elements which inherit from it.

[jkd]

And as an added bonus, IE supports something very similar to this. Like, instead of .cssRules, I think it is just .rules... and other minor discrepancies like that - but the same idea can still be done. Just browser around MSDN for the particular differences...

[brothercake]

That's ideal, thank you