假设我有一个 DIV：<div></div>，我想用 JS 找出它的 line-height 是什么。我知道可以检查样式属性style.lineHeight，但我想检查 actual line-height，没有它，这取决于 CSS 规则的存在。
假设字体系列和字体大小相同，两者应该输出相同的行高：
<div>One line of text</div>
<div>Two <br /> Lines of text</div>
如何使用 JavaScript 获取元素的 line-height？
【问题讨论】：
标签： javascript css
现在有了window.getComputedStyle，这很容易。
function getLineHeight(el: HTMLSpanElement) {
return window.getComputedStyle(el).lineHeight;
}
【讨论】：
这对我来说是最好的方式。到目前为止对我来说没有错误
function getLineHeight(element) {
oldHtml = element.innerHTML
element.innerHTML = "A"
lineHeight = element.offsetHeight
element.innerHTML = oldHtml
return lineHeight }
【讨论】：
这相当复杂。我制作了一个 npm 包，用于将文本固定到一定数量的行数或像素高度。
你不能只检查行高。有时那是normal，这根本没有帮助。
您不能将文本放在另一个元素中，因为它可能会收到不同的样式。
我发现最可靠的方法是从元素中删除所有文本并测量其高度。然后添加一条线并测量高度。第一行添加的高度并不总是与后续行相同。然后添加另一行。第二行和所有后续行都添加相同的数量。
我的工具公开了一个名为 calculateTextMetrics() 的方法，该方法使用上述策略并返回结果测量值。
【讨论】：
答案实际上是使用.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，删除临时元素，并返回它的高度；
【讨论】：
line-height，因为某些内部规则可能会覆盖它。line-height 在整个文档中不是恒定的。..
element.parentNode 替换了document：D
这个解决方案对我有用。它使用明确设置的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;
}
【讨论】：
在 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' )
【讨论】：
normal 是line-height 的有效值。见stackoverflow.com/questions/3614323/…
.clientWidth() 的东西，它用于检索元素的“真实”宽度。
clientHeight，但它只需要一行即可工作（并且没有填充等。不太值得信赖）。另请注意，IE 也会返回normal，并且需要使用lineHeight 而不是line-height 调用它。
.clientHeight() 得到元素高度那样得到行高
对于 IE，请参见 currentStyle，对于其他浏览器请参见 getComputedStyle()（IE9 也支持）。
【讨论】：