Search code examples
javascriptcssgetcomputedstyle

Get element's resolved height CSS property value; recognize 100%

The values returned by getComputedStyle are resolved values. These are usually the same as CSS 2.1’s computed values, but for some older properties like width, height, or padding, they are instead the same as used values.

-- MDN: window.getComputedStyle() notes

So is it currently possible to get the resolved value of height as it was specified in stylesheet?

I.e. know that some element's computed ..px (= used) height was specified as height: 100%; in style sheet? (100% being the resolved value in question.)

Is there some new specification regarding this problem in consideration?

Edit 2020-08-17: see very similar question and excellent answer from 2012: Is there a cross-browser method of getting the used css values of all properties of all elements? (Sadly, noting seem to ave changed since then.)

Solution

  • No, there is no specification or functionality that supports or enables this method. There are plenty of ways to go the other direction, including...

    ... but none that will retrieve the exact percentage specified in the CSS, unfortunately.

    You can try, as I've done below.

    RegEx

    If your height is specified as an inline style, you could RegEx it out of the attribute like so1:

    let elem = document.getElementsByTagName("div")[0];
let re = /(?<=\height:\s+?)[^\;]+/i;
console.log(re.exec(elem.getAttribute("style"))[0]);
    <div style="color: black; height: 100%; background: white;"></div>

    This is terrible practice, though, and could be janky if there are multiple width declarations (which should never happen, but we're already in "bad code land", so why not?). Of course, this ignores the fact that inline styles should generally be avoided in the first place, so this probably won't apply to you.

    Bounding calculations

    It's also possible to calculate the value yourself by comparing the height of the element with the height of its parent.

    let elem = document.getElementById("inner");
let pare = elem.parentElement;

let hrat = `${100*(elem.offsetHeight / pare.offsetHeight)}%`;

console.log(hrat);
    #container {
  height: 300px;
  width: 400px;
  background: repeating-linear-gradient(45deg, rgba(255,0,0,0.35), rgba(255,0,0,0.35) 10px, rgba(255,0,0,0.1) 10px, rgba(255,0,0,0.1) 20px), linear-gradient(white, white);
}

#inner {
  height: 200px;
  width: 400px;
  background: darkgreen;
  mix-blend-mode: hue;
}
    <div id="container">
  <div id="inner"></div>
</div>

    If you add borders, margin, or padding, or the element adapts to the size of its content, though, this calculation will be incorrect.

    Conclusion

    In conclusion, everything is jank.

    In my opinion, you'd be better off not fighting with CSS and JavaScript to coerce the value from the available information, and working out a way to do without the value. I've tried to do this kind of thing many times, so be forewarned: this way lies madness.

    1RegEx lookbehinds are not even remotely close to being fully supported, so shouldn't be used in production.