Calculate real value of line-height

user_13513449 0
Viewed 143

EDITED I have the following HTML Element:

<p class="myElement">Lorem ipsum dolor sit amet</p>

.myElement DOES NOT have any line-height property in its css. I didn't defined line-height (or, assume I defined line-height as normal/inherit/initial, any non-numeric value).

I want to calculate the real line-height value (Or - convert the values from above to px/cm/%) with JS. but the only way to get the line-height value is like this:

let myElement = document.querySelector(".myElement");
let lineHeight = window.getComputedStyle(myElement, null).getPropertyValue("line-height");

and I convert it to number:

lineHeight = lineHeight.replace(/[^\d\.]+/g, "");
lineHeight = lineHeight == "" ? 0 : Number(lineHeight);

and I get 0, because line-height isn't defined, or it's "normal"/"inherit"/"initial".

How can I calculate the REAL value of line-height with JS, and convert these values into px/cm/%?

javascript
1 Answers
let myElement = document.querySelector(".myElement");
let lineHeight = myElement.style.lineHeight;

It's very simple, just go to styles and get the line-height value which is the style element of the DOM element.

user_149670720
Related