假设我有一个 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获取元素的行高？
JavaScript：查找 DIV 的行高，不是 CSS 属性而是实际行高
IT技术
javascript
css
2021-01-17 11:18:24
6个回答
答案实际上是使用.clientHeight. 正如Gaby所说，这并不是真正可靠/值得信赖的。然而，它是！这里：
function getLineHeight(el) {
var temp = document.createElement(el.nodeName), ret;
temp.setAttribute("style", "margin:0; padding:0; "
+ "font-family:" + (el.style.fontFamily || "inherit") + "; "
+ "font-size:" + (el.style.fontSize || "inherit"));
temp.innerHTML = "A";
el.parentNode.appendChild(temp);
ret = temp.clientHeight;
temp.parentNode.removeChild(temp);
return ret;
}
将元素的属性“克隆”为新元素，获取新clientHeight元素，删除临时元素，并返回其高度；
在 quirksmode 解释：http ://www.quirksmode.org/dom/getstyles.html
示例：http : //www.jsfiddle.net/gaby/UXNs2/
function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}
并像使用它一样
getStyle('test', 'line-height' )
这个解决方案对我有用。它使用line-height已明确设置的属性值，或者在未设置该值时，通过查找对象内容增加一行时对象的高度差异来计算该值。
function calculateLineHeight (element) {
var lineHeight = parseInt(getStyle(element, 'line-height'), 10);
var clone;
var singleLineHeight;
var doubleLineHeight;
if (isNaN(lineHeight)) {
clone = element.cloneNode();
clone.innerHTML = '<br>';
element.appendChild(clone);
singleLineHeight = clone.offsetHeight;
clone.innerHTML = '<br><br>';
doubleLineHeight = clone.offsetHeight;
element.removeChild(clone);
lineHeight = doubleLineHeight - singleLineHeight;
}
return lineHeight;
}
请参阅currentStyleIE 和getComputedStyle()其他浏览器（IE9也支持）。
这是相当复杂的。我制作了一个 npm 包，用于将文本固定到一定数量的行或像素高度。
你不能只检查行高。有时normal这根本没有帮助。
您不能将文本放在另一个元素中，因为它可能会收到不同的样式。
我发现的最可靠的方法是从元素中删除所有文本并测量其高度。然后添加一条线并测量高度。第一行添加的高度并不总是与后续行相同。然后添加另一行。第二行和所有后续行都添加相同的数量。
我的工具公开了一个名为calculateTextMetrics()that的方法，该方法使用上述策略并返回结果测量值。
其它你可能感兴趣的问题