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

Retrieving CSS Property Values in Their Specified Units

In web development, it can be essential to retrieve CSS property values as they were originally defined, maintaining their specified units. While getComputedStyle and jQuery's css() method provide values in pixels, there are scenarios where obtaining the raw CSS value is crucial. Here's how you can achieve this in Google Chrome without relying on frameworks:

Chrome's Elemental Inspector

Chrome's element inspector offers a valuable feature: the ability to display CSS property values as they were set, providing a visual cue for the intended value. This suggests that Chrome has the ability to retrieve this information programmatically.

getMatchedStyle Function

To achieve this in code, we utilize the getMatchedCSSRules() method to obtain matched rules, which we then iterate through in reverse order of priority. We prioritize element styles over external rules and check for important properties. The getMatchedStyle function looks like this:

function getMatchedStyle(elem, property){
    // Element style has highest priority
    var val = elem.style.getPropertyValue(property);

    // Stop if important
    if(elem.style.getPropertyPriority(property))
        return val;

    // Get matched rules
    var rules = getMatchedCSSRules(elem);

    // Iterate rules backwards, prioritizing highest priority
    for(var i = rules.length; i --> 0;){
        var r = rules[i];

        var important = r.style.getPropertyPriority(property);

        // Reset if more important or not yet set
        if(val == null || important){
            val = r.style.getPropertyValue(property);

            // Stop if important
            if(important)
                break;
        }
    }

    return val;
}

Example

Consider the following HTML and CSS:

<div class="b">div 1</div>
<div>

div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%;   }
div#c.c  { width: 444px; }
x, div.a { width: 50%;   }
.a       { width: 75%;   }

With the given code, the following widths are retrieved:

div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

This highlights the ability to retrieve CSS property values in their specified units, providing greater flexibility and precision in script-based style manipulation tasks.

The above is the detailed content of How Can I Retrieve CSS Property Values with Their Original Units in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!