javascriptcssdomcssom

How to get the inherited values of element from JavaScript

Okay, so I've a script that gets the CSS property value of a clicked element. For this, I avoided window.getComputedStyle() because it basically converts rem values to px and so on... Instead, I've used CSSStyleSheet.cssRules just to keep the originality of the actual given units and not converting them.

And this does works fine! but it fails to capture CSSRules that are inherited from the parent element since the styles are not directly applied to the element.

For example:

<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>

For this case, getComputedStyle() works the best as CSSRules failed to catch the inherited properties but again, the problem of units arises so I cannot use that.

Or maybe something to get the metric unit of an element? 🤷‍♀️ That would do the job too!

Although Chrome seems to have figured this out perfectly:

enter image description here

It's 2022 and I've checked other answers too but seems like nobody has figured this out yet. What's the current solution to this? Or the best hack?

Edit1:

Edit2:

I've chosen Lajos Arpads answer as the accepted one because of the help I recieved in the comments (not the actual answer itself). The solution is going to be labor intensive so it's something I've to do.

Solution

  • You can simply implement a pixel-to-rem converter and use that:

    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>

    EDIT

    You could do something like this:

    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

    As per the ideas discussed in the comment section, with the goal being to be able to gather the raw rules applied either directly or by inheritance to nodes, there are two main solutions:

    The main difference between the two is that the first is starting with all the CSS rules, while the latter only uses the values.