Window.Getcomputedstyle Not Working for Shorthand Properties in Other Browsers Except Chrome

window.getComputedStyle not working for shorthand properties in other browsers except Chrome

The shorthand property problem

background is a shorthand property, a combination of background related properties. When you set a background of pink, it is actually setting a number of background properties, just one of which is backgroundColor. For instance, it is probably actually doing the equivalent of rgb(255, 165, 0) none repeat scroll 0% 0% / auto padding-box border-box.

getComputedStyle will not return the value of shorthand properties, except in Chrome as you've discovered.

To get the computed style, look for the value of primitive properties such as backgroundColor, not that of shorthand properties such as background.

A different approach?

However, this is not really how you want to be doing things. Instead of setting styles on your elements directly, you're going to find your code to be much cleaner if you add and remove classes from your elements, and then define the rules for the classes. As you've found, setting styles directly on elements may require you to then go back and query the style, whereas with classes, you can easily query the existing class with elt.classList.has(), or toggle with .toggle(), or add, or remove.

More on getComputedStyle

getComputedStyle is a rather specialized API that should only be necessary in special situations.

For more on the issue of getComputedStyle and shorthand properties, see this question. A bug was reported against FF and you can find it here.

See this MDN page. It says that CSSStyleDeclaration (which is what is returned by getComputedStyle) has a getPropertyCSSValue method which

returns ... null for Shorthand properties.

Get border value with getComputedStyle().getPropertyValue()? (Mozilla, FF)

I'm wondering, what do you want to do with a string like border: 1px solid #000?

Say you want to reproduce an elems border in order to copy it copyStyle(el2, el, "border"):

// Copies a set of styles from one element to another.
function copyStyle(dest, source, shorthand) {
  var computed = window.getComputedStyle(source, null);
  for (var i = computed.length; i--;) {
    var property = camelize(computed[i]);
    if (property.indexOf(shorthand) > -1) {
      console.log(property)
      dest.style[property] = computed[property];
    }
  }
}

// prototype.js
function camelize(text) {
  return text.replace(/-+(.)?/g, function (match, chr) {
    return chr ? chr.toUpperCase() : '';
  });
}

Comparing if two element's given set of styles matches can be done in the same manner. Other than that, I really can't see the use a string, which should be parsed if you want to compute anything with it.

Cannot get background style using javascript

You are not storing the value of window.getComputedStyle(test) inside the variable style.

Be aware that getPropertyValue('background-color') returns a RGB value not a HEX code.

var test = document.getElementById('test');

var style = window.getComputedStyle(test);

console.log(style.getPropertyValue('background-color'));

#test {
  background: #0ff0ff;
}

<div id='test'>test</div>

Unable to get value of margin property from result getComputedStyle

The getComputedStyle() function should not evaluate the values of shorthand properties (such as margin, padding), only longhand properties (such as margin-top, margin-bottom, padding-top). In the case of shorthand properties it should only return an empty string.

var el = document.body.appendChild(document.createElement('div'));el.style.margin = '2px';var computed = getComputedStyle(el);
var longhands = ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'];longhands.forEach(function(e) { console.log(e + ': ' + computed.getPropertyValue(e)) });

Get/Set CSS property values via Javascript: questions

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.

---

Related Topics