首页 >web前端 >css教程 >如何在 JavaScript 中检索 CSS 属性值及其原始单位?

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

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-12-24 16:36:10640浏览

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

检索指定单位的 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>
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 属性值的能力,为基于脚本的样式操作任务提供了更大的灵活性和精度。

以上是如何在 JavaScript 中检索 CSS 属性值及其原始单位?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn