如何从 JavaScript 获取元素的继承值

Question

好的，所以我有一个脚本可以获取单击元素的 CSS 属性值。为此，我避免了 window.getComputedStyle() 因为它基本上将 rem 值转换为 px 等等...... 相反，我使用 CSSStyleSheet.cssRules 只是为了保持实际给定单位的独创性，而不是转换它们。

这确实很好用！但它无法捕获 CSS 从父元素继承的 规则，因为样式未直接应用于该元素。

例如：

<style> #new { font-size: 2rem; } </style> <div id="new"> <h1 class="h1">This is a heading</h1> <!––Here h1 is inheriting font-size from div that can't be catched by CSSRules––> </div>

对于这种情况，getComputedStyle() 效果最好，因为 CSSRules 未能捕捉到继承的属性，但再次出现单位问题，所以我无法使用它。

或者获取元素的公制单位？ ‍♀️ 那也行！

尽管 Chrome 似乎已经完美地解决了这个问题：

现在是 2022 年，我也检查过 other answers，但似乎还没有人弄清楚这一点。目前的解决方案是什么？还是最好的技巧？

编辑 1:

我想要用户在 CSS 中定义的相同字符串。像：calc(2rem + 1vh) 并且使用 CSSRules 它可以工作，但它不适用于继承，因为它甚至没有捕捉到属性！ ComputedStyle 可以做到这一点，但在 px 我有点卡在这里。

编辑2：

我选择 Lajos Arpads 答案作为接受的答案是因为我在评论中得到了帮助（而不是实际答案本身）。该解决方案将是劳动密集型的，所以这是我必须要做的事情。

Answer 1

您可以简单地实现一个 pixel-to-rem 转换器并使用它：

function convertPixelsToRem(pixels) {
    return ((pixels.replace("px", "") / getComputedStyle(document.documentElement).fontSize.replace("px", "")) + "rem");
}

console.log(convertPixelsToRem(window.getDefaultComputedStyle(document.getElementById("new").querySelector(".h1"))["font-size"]));

<style>
  #new {
    font-size: 2rem;
  }
</style>

<div id="new">
  <h1 class="h1">This is a heading</h1>
  <!–– Here h1 is inheriting font-size from div ––>
</div>

编辑

你可以这样做：

getOriginalRule(ruleName, ruleValue, item) {
    while (hasSameRule(item.parentNode, ruleName, ruleValue)) item = item.parentNode;
    //return the rule value based on the item via CSSStyleSheet.cssRules
}

编辑2

根据评论部分讨论的想法，目标是能够收集直接或通过继承应用于节点的原始规则，有两个主要解决方案：

可以循环遍历规则，找到它们适用的元素，然后循环 DOM 树以在未被覆盖的原始规则中下降
可以从上到下循环 DOM 树并找到所有节点，将每个节点的规则与其父节点的规则进行比较，如果它们不同，则下降父节点的规则

两者的主要区别在于前者是从所有 CSS 规则开始，而后者仅使用值。

如何从 JavaScript 获取元素的继承值

How to get the inherited values of element from JavaScript

javascript

css

dom

cssom