如何检索原始单位的 CSS 属性值？

获取原始单位的 CSS 属性值

在确定元素的 CSS 属性值时，开发人员通常依赖 getCompulatedStyle 或 jQuery 的 css() 等方法。但是，这些方法返回以像素为单位的值，如果该值最初以其他单位（例如百分比、em 或 px）设置，则可能会出现问题。这就提出了一个问题：无论设置的单位是什么，我们如何获取其原始单位的 CSS 属性值？

元素样式和排序的重要性

关键在于考虑元素样式和 CSS 选择器顺序。元素样式具有最高优先级，因此我们首先检查该值是否在元素的 style 属性中显式设置。如果是，我们检索该值及其优先级。

接下来，我们使用 getMatchedCSSRules 检查匹配的 CSS 规则。这些规则按优先级排序（最高的最后），并且我们向后迭代它们。如果任何规则具有非空优先级，我们会更新该值。但是，如果规则具有重要优先级，我们会立即返回该值。

代码示例

考虑以下 HTML 和 CSS：

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

以及以下 JavaScript代码：

var d = document.querySelectorAll('div');

for (var i = 0; i < d.length; ++i) {
  console.log("div " + (i + 1) + ":  " + getMatchedStyle(d[i], 'width'));
}

此代码输出以下宽度divs:

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

结论

通过考虑元素样式和匹配 CSS 规则的顺序，此自定义 getMatchedStyle 函数可以准确检索原始单位的 CSS 属性值。这些知识对于精确管理元素大小和尺寸至关重要。

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