Get/Set CSS property values via Javascript: questions

Question

Some things are unclear to me:

var myDiv = document.getElementById("myDiv");
var computedStyle = window.getComputedStyle(myDiv);

1) Isn't it possible to directly get global border color of a div if there is only one color, the same for each side:

computedStyle.getPropertyValue("border-color");

Instead of doing:

computedStyle.getPropertyValue("border-left-color");

OR

computedStyle.getPropertyValue("border-right-color");

OR

computedStyle.getPropertyValue("border-top-color");

...

2) When having style properties in a CSS file, they are only accessible through the getComputedStyle method and not via the style property like style properties defined inline, via a style attribute in the div, I'm right?

myDiv.style.getPropertyValue("border-left-color");

This will not work.

3) If we want to set a style property, we have to use the style attribute of the element, is it not possible using the computed style object?

computedStyle.setProperty("border-color", "yellowgreen", null);

I thought using the style attribute was the "old way to do", like using the inline style attribute or using object.style.property = "value" to set a style property in Javascript.

Thanks.

jsFiddle: http://jsfiddle.net/pgtFR/12/

Answer 1

1) Isn't it possible to directly get global border color of a div if there is only one color, the same for each side:

Yes, its possible to get the computed style by just using the shorthand property name. I tried the example you have shared on jsfiddle and computedStyle.getPropertyValue("border-color") does return (265,65,0) which is the rgb code for orange as expected.

2) When having style properties in a CSS file, they are only accessible through the getComputedStyle method and not via the style property like style properties defined inline, via a style attribute in the div, I'm right?

Yes. getComputedStyle returns the final computed style value by the browser after applying external, internal and inline style rules. .style attribute only refers to the inline style for the element.

3) If we want to set a style property, we have to use the style attribute of the element, is it not possible using the computed style object?

No. According to this document, getComputedStyle returns a CSSStyleDeclaration object which is read-only.

Answer 2

Isn't it possible to directly get global border color of a div if there is only one color, the same for each side

Yes and No. The spec describes two methods:

• getPropertyCSSValue() returns a CSSValue of a single CSS Property. It does not work with shorthand properties.
• getPropertyValue() returns a DOMString, and works also for shorthand properties. But you need to be careful when there are different borders, the string will represent all of them.

When having style properties in a CSS file, they are only accessible through the getComputedStyle method

No. They are also accessible through document.styleSheets (spec), and can be changed with the StyleSheet interface.

...and not via the style property like style properties defined inline, via a style attribute in the div, I'm right?

Yes. The .style property represents only the style declaration in the style attribute (inline styles).

If we want to set a style property, we have to use the style attribute of the element

I guess you mean a CSS property. You can also influence the computed style by setting classes on your element (or anything else that applies other styles through a stylesheet). Or you can create stylesheets dynamically, and they will be applied on the document. You can also set the style attribute of an element, but usually you will use the CSSStyleDeclaration interface exposed by the .style property.

is it not possible using the computed style object?

Yes. The spec says that the returned "CSSStyleDeclaration is read-only and contains only absolute values".

Answer 3

Ok, first off let's address this:

I thought using the style attribute was the "old way to do", like using the inline style attribute or using object.style.property = "value" to set a style property in Javascript.

The style property in JS is very different from inline styles in HTML. Inline styles in HTML are bad (IMHO) because:

1. They are rough on your designer; if you change blue to lightBlue, and you had a class "blue", you have one place to change (your stylesheet). If instead you had a document full of style='color:blue' ... well now you get to have some fun with using the Linux sed command to do a massive find/replace ;-)

2. Classes work better performance-wise. For one thing, page load-wise, style='color:blue' is six more characters than class='blue'. When you start having multiple classes/styles, and lots of elements with all those, it (kind of) adds up. Similarly, once you enter JS land, changing classes on things is slightly faster than changing styles directly. PPK did a study on this awhile back on his quirksmode.org blog.

But the thing is, browsers have changed a lot since PPK did that study, and changing classes at best saves a few ms vs. changing styles. Similarly, the page size will change with classes vs. styles, but with today's bandwidth the change won't be significant unless you have some truly horrible markup.

So, at the end of the day, classes and stylesheets are preferred primarily for reason #1; trying to maintain a consistent look, or even a not-fugly-but-inconsistent look, is basically almost impossible with inline styles. Maybe if you do a huge amount of server-side processing to generate those inline styles ... but I wouldn't recommend it.

However, none of that precludes using the JS property "style" though. In fact, if you look at the source for jQuery, you'll see that it's filled with uses of .style. And jQuery isn't just the most popular library on the web; it's all (originally) John Resig code, which means it's as good, quality-wise, as JS code gets.

So yeah, use style. Don't feel guilty about it :-)

Now, as for the rest of your questions, the short answer is that getComputedStyle is essentially the JS reference to the stylesheets, and as such you can't alter them (no to 3), they don't have inline styles (yes to 2) and I'm honestly not sure what the different browsers do in the 1) case; I wouldn't expect anything consistent, but you might get lucky.