Question

I’m looking to get the used css values of all DOM elements on a page. When I say "used values" I’m referring to the definition as specified in the W3C specification:

6.1.3 Used values

Computed values are processed as far as possible without formatting the document. Some values, however, can only be determined when the document is being laid out. For example, if the width of an element is set to be a certain percentage of its containing block, the width cannot be determined until the width of the containing block has been determined. The used value is the result of taking the computed value and resolving any remaining dependencies into an absolute value.

These should be the final values computed with respect to the actual page layout. Mozilla’s docs claim that you can use window.getComputedStyle to get the used values, but this does not make sense to me because computed values are different from used values (and I want used values). Even if these are the used values, I’m not sure if this only works in Firefox or not. Is there a way to reliably get used values in all browsers?

Answer 1

Note: The world has moved on since the question was asked and answered. There are now more layers of values than there used to be: declared, cascaded, specified, computed, resolved, used, and actual. getComputedStyle returns resolved values (which are either computed or used depending on the property). Here are the layers:

From CSS Cascading and Inheritance Level 4:

Once a user agent has parsed a document and constructed a document tree, it must assign, to every element in the tree, and correspondingly to every box in the formatting structure, a value to every property that applies to the target media type.

The final value of a CSS property for a given element or box is the result of a multi-step calculation:

1. First, all the declared values applied to an element are collected,
   for each property on each element.
   There may be zero or many declared values applied to the element.
2. Cascading yields the cascaded value.
   There is at most one cascaded value per property per element.
3. Defaulting yields the specified value.
   Every element has exactly one specified value per property.
4. Resolving value dependencies yields the computed value.
   Every element has exactly one computed value per property.
5. Formatting the document yields the used value.
   An element only has a used value for a given property
   if that property applies to the element.
6. Finally, the used value is transformed to the actual value based on constraints of the display environment.
   As with the used value, there may or may not be an actual value for a given property on an element.

Then, the CSS Object Model defines resolved values:

getComputedStyle() was historically defined to return the “computed value” of an element or pseudo-element. However, the concept of “computed value” changed between revisions of CSS while the implementation of getComputedStyle() had to remain the same for compatibility with deployed scripts. To address this issue this specification introduces the concept of a resolved value.

The resolved value for a given longhand property can be determined as follows:

…which is followed by a list of properties (specific ones and categories) saying whether the resolved value is the computed or used value.

With that backdrop:

getComputedStyle works on all major modern browsers. Earlier versions of IE provide a near-equivalent in the form of currentStyle.

getComputedStyle returns resolved values, which for any given property is either the computed value or the used value, with the CSSOM spec defining clearly what properties get returned with which kind of value under which circumstances. I don’t see anything in CSSC&I4 or CSSOM defining a way to access used values in cases where the resolved value isn’t the used value, or a way to access actual values, and gsnedders says they have checked with the working group and confirmed there isn’t a way to get used values, at least not yet.

Resolved values are probably good enough for what you need. For instance, the following example shows 207.5px or similar , not 50%. That’s the resolved value, which is also the used value in this particular case (because I used width on an element where the display isn’t none or contents), but possibly not the actual value, depending on whether subpixel rendering is feasible and appropriate in this case.

(function() {
  var target = document.getElementById("target");
  var style = window.getComputedStyle(target);
  display("computed width = " + style.width);
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }
})();

<div id="target" style="display: inline-block; width: 50%">x</div>