如何获取初始定义的CSS属性值（包括百分比和EM单位）？

获取初始定义的 CSS 属性值（百分比/EM/PX）

在 Web 开发中，检索原始值至关重要元素的 CSS 属性值，无论任何后续修改如何。当使用百分比或 em 等单位时尤其如此，因为计算值通常提供 px 值。

问题定义

使用 getCompulatedStyle 等函数时会出现问题或者 jQuery 的 css() 来获取当前的 CSS 属性值。这些方法返回以像素为单位的值，即使最初设置为其他单位。

解决方案：getMatchedStyle

要解决此问题，可以使用名为 getMatchedStyle 的自定义 JavaScript 函数受雇。此函数迭代元素的 CSS 规则，确定元素样式和重要规则的优先级。然后，它返回 CSS 规则中定义的初始值。

代码示例

function getMatchedStyle(elem, property) {
  // Check for element-defined property (highest priority)
  var val = elem.style.getPropertyValue(property);

  // If important, return immediately
  if (elem.style.getPropertyPriority(property)) return val;

  // Get matched CSS rules in descending priority order
  var rules = getMatchedCSSRules(elem);

  // Iterate through rules backwards to ensure correct priority
  for (var i = rules.length; i--;) {
    var r = rules[i];

    // Check if rule is important
    var important = r.style.getPropertyPriority(property);

    // Update value only if not set or if important rule encountered
    if (val == null || important) {
      val = r.style.getPropertyValue(property);

      // Return if important rule encountered
      if (important) break;
    }
  }

  return val;
}

示例用法

考虑以下 HTML 和 CSS：

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

以下 JavaScript 代码可以用于检索div的初始宽度：

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

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

输出

div 1:  100px
div 2:  50%

通过使用getMatchedStyle函数，我们可以准确检索CSS属性值按照最初的定义，无论它们是否被后续样式修改。

以上是如何获取初始定义的CSS属性值（包括百分比和EM单位）？的详细内容。更多信息请关注PHP中文网其他相关文章！