4

I've been looking at a few different things I'd like to using JavaScript to tweak styles globally. I'd like to do this by changing the CSS rule that dictates the element's style (akin to doing this through the Inspector in Webkit), but after coming to https://developer.mozilla.org/en/DOM/CSSStyleRule I now don't know if this is even possible:

style

Returns the CSSStyleDeclaration object for the rule. Read only.

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

Stuart P. Bentley
  • 10,195
  • 10
  • 55
  • 84
  • 1
    "Read only" actually just means you can't redefine it directly (e.g. `element.style = {background: "black"}`). You're allowed modify attributes of `.style` (e.g. `element.style.background = "black"`). – Jeremy Aug 21 '11 at 06:01

2 Answers2

5

To modify your existing styles, either find the stylesheet in document.styleSheets or from the the .sheet property of the <style> or <link> element you want to modify. Then modify the properties in whatever rule they're located in (see https://developer.mozilla.org/en/DOM/CSSRuleList). I'd advice against using the CSSOM to modify properties, as browser support for modifying CSS properties through the CSSOM is pitiful (no browsers whatsoever support it). Instead, just set a string value.

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

Eli Grey
  • 35,104
  • 14
  • 75
  • 93
  • If by "CSSOM" you mean stuff like `document.getElementById("img-style").sheet.cssRules[0].style.width = size + "px"`, that works fine in every browser I tried. – Stuart P. Bentley Aug 23 '11 at 00:52
  • Yeah, that works fine, but there's a preferred API for modifying properties where you can use real integers and CSS unit constants instead of strings, but support for it is horrible. – Eli Grey Aug 23 '11 at 05:27
3

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

If the styles you want to switch between are known in advance, then the easiest way to change between them is to define both those styles in a stylesheet, and use different class designations to trigger one vs. the other.

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

If there are large numbers of objects, then something I've done is to add a class name on the body tag to trigger the alternate style to take effect for all affected objects. It works like this:

Lots of these in your HTML:

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

Then, have two pre-defined CSS rules like this in this order:

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

Then, using Javascript, any time you want to change to the alternate style, you simply do this (using jQuery or any favorite class library):

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

To go back to the original style, you can just remove that class:

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

This doesn't have to be added to the body tag - it can be added to any common parent of all the affected objects.

I personally find this a lot simpler than programmatically creating style rules and it keeps the actual style information out of the code (where designer people who aren't programmers can more easily access it).

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

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • 1
    I'm not trying to switch styles, though. I'm trying to edit an existing style. Telling me that there's a way to do it and then not saying what that way is isn't helpful. – Stuart P. Bentley Aug 21 '11 at 05:52
  • 1
    This does change a style. Try the jsfiddle demo to see it. I think this is a better way to do it and it's the way I know how to write the code. I know you can get at the style sheets with JS, but I don't know how to do it myself in a cross browser way (because older versions of IE are different) so I NEVER do it that way. This is a way to solve most problems like this. Sorry for trying to offer what I thought was a very helpful idea. Here are the basics on JS access to style sheets: http://www.quirksmode.org/dom/changess.html. Have fun. – jfriend00 Aug 21 '11 at 05:56