CodingForums.com - changing element styles in real time

CodingForums.com (http://www.codingforums.com/index.php)

- DOM and JSON scripting (http://www.codingforums.com/forumdisplay.php?f=15)

- - changing element styles in real time (http://www.codingforums.com/showthread.php?t=14259)

brothercake

02-06-2003 10:16 PM

changing element styles in real time

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

Code:

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	02-07-2003 08:27 PM

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	02-07-2003 08:29 PM

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

02-07-2003 10:49 PM

That's ideal, thank you :thumbsup:

All times are GMT +1. The time now is 06:16 AM.