How Can I Retrieve CSS Property Values in Their Original Units?

Getting CSS Property Values In Their Original Units

When determining an element's CSS property value, developers often rely on methods like getComputedStyle or jQuery's css(). However, these methods return the value in pixels, which can be problematic if the value was originally set in other units (e.g., percentage, em, or px). This raises the question: how can we obtain the CSS property value in its original unit, regardless of what units it was set with?

The Importance of Element Styles and Ordering

The key lies in taking into account element styles and CSS selector ordering. Element styles have the highest priority, so we start by checking if the value is explicitly set in the element's style property. If it is, we retrieve the value and its priority.

Next, we examine the matched CSS rules using getMatchedCSSRules. These rules are ordered by priority (highest last), and we iterate through them backwards. If any rule has a non-null priority, we update the value. However, if a rule has an important priority, we immediately return the value.

Code Example

Consider the following HTML and CSS:

<div class="b">div 1</div>
<div>
<p>And the following JavaScript code:</p>
<pre class="brush:php;toolbar:false">var d = document.querySelectorAll('div');

for (var i = 0; i <p>This code outputs the following widths for the divs:</p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

Conclusion

By considering both element styles and the ordering of matched CSS rules, this custom getMatchedStyle function accurately retrieves CSS property values in their original units. This knowledge is crucial for precisely managing element size and dimensions.