How to get the inherited values of element from JavaScript

Question

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:

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:

• I want the same string as defined in the CSS by the user. Like: calc(2rem + 1vh) And with CSSRules it is working but it doesn't works with inheritance because it's not even catching the property! ComputedStyle does that but in px I'm kinda stuck here.

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.

Answer 1

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:

• one can loop through the rules, find the elements they apply to and then loop the DOM tree to descend the raw rules where they were not overriden
• one can loop the DOM tree from top to bottom and find all nodes, compare each node's rules with its parent's rules and if they differ, descend the parent's rules

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