The only way to change the style to do this for each element in JavaScript?

Question

I looked at a few different things that I would like to use JavaScript to style around the world. I would like to do this by changing the CSS rule that dictates the style of the element (similar to how it is done through the Inspector in Webkit), but after switching to https://developer.mozilla.org/en/DOM/CSSStyleRule Now I don’t know , is it possible:

style

Gets the CSSStyleDeclaration object for the rule. Only for reading.

So, there is no way to change higher level styles in JavaScript?

Answer 1

To modify existing styles, find the stylesheet in document.styleSheets or from the .sheet property of the <style> or <link> element that you want to change. Then change the properties in whatever rule they are in (see https://developer.mozilla.org/en/DOM/CSSRuleList ). I would suggest using CSSOM to change properties, since browser support for changing CSS properties through CSSOM is pathetic (no browser supports it). Instead, just set the string value.

If all you want to do is insert a new rule, just get the stylesheet from the above method or document.documentElement.appendChild(document.createElementNS("http://www.w3.org/1999/xhtml","style")).sheet . Then use insertRule to add your rule.

Answer 2

CSS styles can be created / modified programmatically using javascript, but this is usually not the easiest way to solve the problem, because different browsers do it differently, so cross-browser support is a bit of a pain if you don't already have a library that abstracts. You can see how to do it here: http://www.quirksmode.org/dom/changess.html .

If the styles you want to switch are known in advance, then the easiest way to change between them is to define both these styles in the style sheet and use different class notations to start one and the other.

If you are just trying to work on a single object or a small number of objects, you can simply add or remove the class name through javascript on the affected objects.

If there are a large number of objects, then something that I did was add the class name to the body tag to bring up an alternative style to take effect for all affected objects. It works as follows:

Many of them in your HTML:

 <div class="foo"></div> <div class="foo"></div> <div class="foo"></div> <div class="foo"></div> 

Then, in this order, there are two predefined CSS rules:

 .foo {background-color: #777;} .alternate .foo {background-color: #F00;} 

Then, using Javascript, anytime you want to change the alternate style, you just do it (using jQuery or any favorite class library):

 $(document.body).addClass("alternate"); 

To return to the original style, you can simply remove this class:

 $(document.body).removeClass("alternate"); 

This does not need to be added to the body tag - it can be added to any regular parent object of all affected objects.

I personally find this a lot easier than creating style rules programmatically, and it saves actual style information from code (where developers who are not programmers can more easily access it).

You can see this technique in action here: http://jsfiddle.net/jfriend00/UXKvg/