Okay, I'll try to explain this as simply as possible. I want to, dynamically, most likely with a javascript function, change the properties of a CSS style. Currently, I've crafted some code that will allow me to change/apply a style to a specific DIV -- targeting the ID of it. This is great...
Here is a sample of the code:
<!-- .theStyle {
width: 150px;
height: 150px;
visibility: hidden;
background-color:#CCCCCC;
} -->
function makeVis(divID) { document.getElementById(divID).style.visibility = "visible"; }
The First Div The Second Div
Make One Visible | Make Two Visible
When I click 'Make One Visible' it will make 'theDivNameOne' show up. The second will stay hidden. And the same works with 'Make Two Visible'.
Now here comes the part I can't figure out.
I want to change the style by targetting the actual style/class that is specified in the CSS code -- not by targetting the actual DIV. So if I could do something like:
Make Them ALL Visible
Any DIV, SPAN, P or anything that has 'class="theStyle"' applied to it, will change... It actually changes the class/style rather than changing the class/style of a specific item.
Any ideas?
as far as I know (which isn't very far with JavaScript...) JS cannot change the CSS rules for a doc at all - so you need another plan.
What you need is to get all the elements (the DIVs the Ps the SPANs etc) that have a specific class into an array - then you loop through that array and make each element visible (or set it to another class or whatever else).
There seem to be a number of functions out there called getElementsByClassName or something similar that will get you that array.
Here's one -http://www.snook.ca/archives/000370.php I haven't tried it myself, just found it in Google.
Well after about 10 to 12 hours of searching, reading, and tinkering I've done it! I am CSS/JS code Ninja today!
Here is a working example.
The JS code used is as follows:
function changeRule(theNumber) { var theRules = new Array(); if (document.styleSheets[0].cssRules) { theRules = document.styleSheets[0].cssRules; } else if (document.styleSheets[0].rules) { theRules = document.styleSheets[0].rules; } theRules[theNumber].style.backgroundColor = '#FF0000'; }
I've tested this on FF(Mac), Safari(Mac), O9(Mac), IE5(Mac), IE6(PC), FF(PC) and they all work. The reason for the 'if' statement is some of the browsers use cssRules... some use just rules... And the only other hair is that you can't use "background-color" to refer to the style, you have to get rid of the hyphen and capitalize the first letter after the hyphen.
To refer to the first CSS rule you'd use "changeRule(0)", the second "changeRule(1)" and the third "changeRule(2)" and so on...
I haven't found a browser it doesn't work on.... yet....
nice one.
lives learns
Yeah... it does indeed rock... The reason for me looking for it was to hide any flash elements when a special CSS layer shows up over top of everything. I can switch the visibility of any flashDiv to hidden.
Hello, I registered in these forums just to add this little bit as I could not conveniently find it elsewhere:
function changeStyle(selectorText) { var theRules = new Array(); if (document.styleSheets[0].cssRules) { theRules = document.styleSheets[0].cssRules; } else if (document.styleSheets[0].rules) { theRules = document.styleSheets[0].rules; } for (n in theRules) { if (theRules[n].selectorText == selectorText) { theRules[n].style.color = 'blue'; } } }
This simply makes the CSS rule identifiable by its selector name rather than by its index number in the cssRules array.
In other words, you can execute the Javascript function with the string argument "selectorText" instead of a number that is difficult to remember and susceptible to frequent changes if new styles are added.
Thank you for your 10 to 12 hours of research, Flip, I hope I made a worthy addition.
Its only 4.5 years old this thread.
Nowadays, you would clearly accomplish this:
I want to change the style by targetting the actual style/class that is specified in the CSS code
with jQuery
$('.theStyle').hide();
jquery...
is awesome.
werd
While jQuery is very cool,
$('.theStyle').hide();
won't change the class.
Instead, it will use the selector '.theStyle' to search your HTML Elements for any that have this class name. It will then numerate through those HTML Elements setting their style to be hidden. Again, it won't actually change the '.theStyle' class.
Looks like the cssRules solution is the right way to go.
The rquirement was to hide certain elements based on them having a specific css class. I think the jQuery solution fits the bill purrrfectly.
Still a 5yo thread tho 
Originally posted by: BillyBones Hello, I registered in these forums just to add this little bit as I could not conveniently find it elsewhere:
Thank you for your 10 to 12 hours of research, Flip, I hope I made a worthy addition.
And I signed up on this forum just to thank Flip and BillyBones. Thanks guys! That's byootiful!
I found this very very useful, just did a small modification that you can send an object to the function with all the styles you want to modify, and apply it all together.
function changeStyle(selectorText, styles) { var theRules = new Array(); for (i in document.styleSheets) { if (document.styleSheets[i].cssRules) { theRules = document.styleSheets[i].cssRules; } else if (document.styleSheets[i].rules) { theRules = document.styleSheets[i].rules; } for (n in theRules) { if (theRules[n].selectorText == selectorText) { if (styles != undefined) { for (styleName in styles) { eval("theRules[n].style."+styleName+"=styles[styleName]"); } } } } } }
I hope this helps someone someday
In addition to altering rules, you can also add to and remove rules from the stylesheet objects.
// standard API document.stylesheets[i].insertRule('H1 { text-weight: bold; }', 0);
// IE document.stylesheets[i].addRule('H1', 'text-weight: bold', 0);
Also, you can enable and disable stylesheets in the document.styleSheets array ( or directly by id of the or element) through setting the disabled property.
I've never seen a practical use for all this though. Aren't stylesheets supposed to represent the default styling values ? It makes more sense to me to add special case classes and toggle those in your live doc.
Can anyone help modify the JSColor script (http://jscolor.com/) possibly using one the mods mentioned previously in this thread so that colors can be updated for classes rather than just IDs?
Originally posted by bbs
Can anyone help modify the JSColor script (http://jscolor.com/) possibly using one the mods mentioned previously in this thread so that colors can be updated for classes rather than just IDs?
Never mind, figured it out. Thanks Flip, you're a saviour.