如何在 JavaScript 中检索 CSS 属性值及其原始单位？

检索指定单位的 CSS 属性值

在 Web 开发中，检索最初定义的 CSS 属性值非常重要，维持其指定单位。虽然 getComputedStyle 和 jQuery 的 css() 方法提供以像素为单位的值，但在某些情况下获取原始 CSS 值至关重要。下面介绍了如何在 Google Chrome 中实现此目的，而无需依赖框架：

Chrome 的元素检查器

Chrome 的元素检查器提供了一项有价值的功能：显示 CSS 属性值的能力当它们被设置时，为预期值提供视觉提示。这表明 Chrome 能够以编程方式检索此信息。

getMatchedStyle 函数

为了在代码中实现此目的，我们利用 getMatchedCSSRules() 方法来获取匹配的规则，然后我们按照相反的优先级顺序对其进行迭代。我们优先考虑元素样式而不是外部规则，并检查重要属性。 getMatchedStyle 函数如下所示：

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;
}

示例

考虑以下 HTML 和 CSS：

<div class="b">div 1</div>
<div>
<pre class="brush:php;toolbar:false">div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%;   }
div#c.c  { width: 444px; }
x, div.a { width: 50%;   }
.a       { width: 75%;   }

使用给定代码，以下宽度是检索：

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

这突出了以指定单位检索 CSS 属性值的能力，为基于脚本的样式操作任务提供了更大的灵活性和精度。