changing class attributes

[cortic]

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.

[beetle]

Why not just use a cookie to store the style values, then on page load read the cookie and set the style properties accordingly.

[cortic]

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?

[beetle]

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)

[BrainJar]

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.

[beetle]

Cool! Thanks BrainJar. I didn't realize each rule was exposed that way. thx