Reading elem.style -- is result format guaranteed by spec?

Question

const box = document.getElementById('box');
box.style.backgroundColor = '#ff0000';
console.log(box.style.backgroundColor);

#box {
  width: 50px;
  height: 50px;
}

<div id="box"></div>

This prints "rgb(255, 0, 0)" in Chrome 75. What I want to know is -- is this guaranteed by spec? Or are browsers free to return any valid representation?

It is giving same in firefox too, i'm sure this is independent of system, You always want to read inline styles or also the cascade applied styles too ? — Code Maniac, Jul 23 '19 at 02:01
The return value is totally dependent on what you set, if you use `green` it will show the color name itself, if you use `rgba/hsla` it will reutrn in `rgba` format — Code Maniac, Jul 23 '19 at 02:10
The only caveat with this is this will give you only inline properties, if you want to get all the applied properties on element you need to use `window.getComputedStyle` — Code Maniac, Jul 23 '19 at 02:12
@CodeManiac If I have to pick, then "inline". What I really want to know is if I set this value programatically, can I expect to be able to read it back out in a consistent format, cross-browser? And follow-up question, is there a reliable method to read back the `r`,`g` and `b` values, as numbers 0-255? — mpen, Jul 23 '19 at 02:48

score 3 · Accepted Answer · answered Jul 23 '19 at 06:03

When you are to get a value from a CSSStyleDeclaration, the browser has to call the serialize a CSS value algorithm.

Various values will have different parsing rules.

If we take your value, backgroundColor is a longhand property, so we can directly jump to the component #FF0000, which is a <color> component. We thus have to use the algorithm described here:

Our <color>'s alpha value is 1, we will use "the serialization of the rgb() functional equivalent of the opaque color"

 "rgb(" + 255 + ", " + 0 + ", " + 0 + ")"

This particular example has a very clear output if we follow the specs.

And I think most browsers do follow this part of the specs since enough of a long time for it to be considered safe assumption modern ones will return this value.

But this is not true for all CSS values. If you take for instance the shorthand values, then different browsers will output different results, because the specs are more lenient as to what should happen.

const style = document.createElement('a').style;
style.background = "#FF0000";
console.log(style.background);

// in Firefox "rgb(255, 0, 0) none repeat scroll 0% 0%"
// in Chrome and Safari "rgb(255, 0, 0)"

Same thing for other components like where browsers don't agree on the output format of the url() func.

const style = document.createElement('a').style;
style.backgroundImage = "url('foo.bar'),  url('baz.bla')";
console.log(style.backgroundImage);

// in Firefox and Chrome 'url("foo.bar"), url("baz.bla")'
// in Safari 'url("https://stacksnippets.net/foo.bar"), url("https://stacksnippets.net/baz.bla")'

// and IIRC previous versions of one of these browsers did use `'` instead of `"` for quite a long time.

So I'm not sure what you really are after, but if what you want is just to parse a #RrGgBb notation to an rgb() one, you might actually prefer to do it manually, at least because it should have less side-effects than using a CSSStyleDeclaration.

Thank you! That's what I was interested in. However, there's a little paragraph at the end that's interesting: "If the color was explicitly specified by the author, then return the original, author specified color value." -- I've explicitly specified it in this case, no? And that's not what the browser is returning, unless given a color name like "red". — mpen, Jul 23 '19 at 16:44

Reading elem.style -- is result format guaranteed by spec?

1 Answers1