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

Question

好的，所以我有一个脚本可以获取单击元素的CSS属性值。为此，我避免了window.getCompentedStyle（），因为它基本上将rem值转换为px等... 取而代之的是，我使用csStyleSheet.cssrules只是为了保持实际给定单元的独创性而不是转换它们。

而且这确实可以！但是它无法捕获从父元素继承的的cssrules，因为该样式未直接应用于元素。

例如：

<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未能捕获继承的属性，但同样，单位问题出现了，所以我无法使用。

还是可以获取元素的度量单位？

Answer 1

您可以简单地实现像素到EM EM转换器并使用它：

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
}

根据评论部分讨论的想法， EDIT2

的目的是能够收集直接或通过继承到节点应用的原始规则，有两个主要解决方案：

• 一个人可以循环通过规则，查找它们
• 应用于它们有所不同，降低了父的规则，

两者之间的主要区别是第一个是从所有CSS规则开始的，而后者仅使用值。