Ok, the problem, I need to change dynamically how a class is displayed, my site (with out going into detail) interprets saved info from the user (its saved through perl) in a *.js file, then views it through template *.htm files drawing on js files after loading.
The thing is I need to allow for several settings like font type size and color, (things that could be held in style sheets) but then save in their js file a number representing this and load it when the template page is opened.
I have two possibilities to answer this
1, instead of using classes I could use Ids - but using 1 id for what could (hypothetically) be an endless string of elements seems real messy, I don't even know if it would work.
2, I read somewhere I could dynamically generate style tags with the classes defined, but I can't find where I read this...
Any help would be appreciated thanks.
Why not just use a cookie to store the style values, then on page load read the cookie and set the style properties accordingly.
Getting the info loaded is not the problem, I'm actually using a cookie to store user vars to reference there personal *.js file, and pass info to validate the cgi - that part is working fine. Its just that after the template 'to view data' page is loaded and after its loaded their generated *.js file I have a bunch of variables that represents settings how do I access a class and change its settings to these variables?
Oh, when you say class you mean CSS class.
Uhhhh, you don't.
You can switch to a different style sheet (e.g. www.meyerweb.com) or actively change style properties on specific objects (like a rollover ;)) but you can't affect the class per-se. (that I know of)
You can access the individual rules in style sheets. This code changes the font-size property in the first rule of the second stylesheet in a document:
// DOM-compliant browsers.
if (document.styleSheets[1].cssRules) {
document.styleSheets[1].cssRules[0].style.fontSize = "16pt";
// For NS 6.1, insert a dummy rule to force styles to be reapplied.
if (navigator.userAgent.indexOf("Netscape6/6.1") >= 0)
document.styleSheets[1].insertRule(null, document.styleSheets[1].cssRules.length);
}
// IE browsers.
else if (document.styleSheets[1].rules[0])
document.styleSheets[1].rules[0].style.fontSize = "16pt";
A couple of notes: IE uses the property name .rules instead of .cssRules. NS 6.1 is a little buggy, it doesn't update the display when you change the style. The code above shows a workaround that makes it redraw the page. This bug doesn't seem to affect 6.0 or 6.2 however.
Cool! Thanks BrainJar. I didn't realize each rule was exposed that way. thx