如何获取css的属性值,非计算后的属性?

先看个例子:

<html style="font-size: 10px;">
<head>
    <style>
        .p {
            width:20rem;
        }
    </style>
</head>
<body>
    <p style="width:10rem"></p>
    <p style="width:10px"></p>
    <p class="p"></p>
</body>
</html>

我查阅了相关的资料,
类似window.getComputedStyle(element,伪类)的方法只能获取到计算后的样式值,即以上p元素的宽度依次为:100px10px200px

而类似element.style的方法可以获取计算前的样式值,但只能获取内联样式

那么有没有这样的方法,可以获取元素最终使用、但未经计算的值呢?
即以上代码获取p元素的宽度依次为:10rem10px20rem

就像chromedevtools,里边的Styles面板,始终会显示没有计算过的属性值。

阅读 2.4k
1 个回答
直接元素.style 不是么?

需要从 styleSheets 去分析,处理起来有点复杂,给你个参数

参考:https://stackoverflow.com/que...

这个参考是通过对比 selector 来实现的,如果借助 jQuery,可以实现对 Element 的匹配

$(el).is(selector)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题