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

获取原始单位的 CSS 属性值

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

元素样式和排序的重要性

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

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

代码示例

考虑以下 HTML 和 CSS：

<div class="b">div 1</div>
<div>
<p>以及以下 JavaScript代码：</p>
<pre class="brush:php;toolbar:false">var d = document.querySelectorAll('div');

for (var i = 0; i <p>此代码输出以下宽度divs:</p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

结论

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