JavaScript：查找DIV的行高，而不是CSS属性，而是实际的行高

小编典典

JavaScript：查找DIV的行高，而不是CSS属性，而是实际的行高

css

假设我有一个DIV：<div></div>我想用JS找出它的行高。我知道可以检查style属性style.lineHeight，但是我想检查
实际的 line-height ，而没有它取决于CSS规则的存在。

假设字体系列和字体大小相同，则两者应输出相同的 line-height ：

<div>One line of text</div>
<div>Two <br /> Lines of text</div>

如何使用JavaScript 获取元素的行高？

阅读 329

2020-05-16

共1个答案

小编典典

答案实际上是使用.clientHeight。正如 Gaby 所说，这并不是真正可靠/可信赖的。但是，是！这里：

function getLineHeight(element){
   var temp = document.createElement(element.nodeName);
   temp.setAttribute("style","margin:0px;padding:0px;font-family:"+element.style.fontFamily+";font-size:"+element.style.fontSize);
   temp.innerHTML = "test";
   temp = element.parentNode.appendChild(temp);
   var ret = temp.clientHeight;
   temp.parentNode.removeChild(temp);
   return ret;
}

将元素的属性“克隆”到新元素中，获取新clientHeight元素，删除临时元素，然后返回其高度；

2020-05-16