计算line-height的实际值

Question

已编辑 我有以下 HTML 元素：

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

.myElement

在其 CSS 中没有任何

line-height

属性。我没有定义

line-height

（或者，假设我将

line-height

定义为

normal

/

inherit

/

initial

，任何非数字值）。

我想用JS计算真实的行高值（或者-将上面的值转换为px/cm/%）。但获取行高值的唯一方法是这样的：

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

我将其转换为数字：

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

我得到0，因为行高没有定义，或者它是“正常”/“继承”/“初始”。

如何用JS计算

line-height

的真实值，并将这些值转换为px/cm/%？

Answer 1

已经有一段时间了，但希望这对其他人有帮助。

const ele = document.querySelector('p')
ele.style.padding = '0'
const lineHeightInPixel = ele.clientHeight

Answer 2

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

很简单，只要去styles中获取line-height值，即DOM元素的style元素即可。