Question

假设我有一个DIV：<div></div>我想知道它的行高是什么。我知道可以检查样式属性style.lineHeight，但我想查看实际行高，不依赖于CSS规则的存在。

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

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

如何使用JavaScript获取元素的 line-height ？

Answer 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，删除临时元素，并返回其高度;

Answer 2

在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' )

Answer 3

此解决方案适合我。它在显式设置时使用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;
}

Answer 4

有关IE的currentStyle和其他浏览器的getComputedStyle()（IE9也支持）。

Answer 5

这相当复杂。我制作了一个 npm 包，用于将文本固定到一定数量的行或像素高度。

你不能只检查行高。有时那是 normal 根本没有帮助。

您不能将文本放在另一个元素中，因为它可能会收到不同的样式。

我发现的最可靠的方法是从元素中删除所有文本并测量其高度。然后添加一条线并测量高度。第一行添加的高度并不总是与后续行相同。然后添加另一行。第二行和所有后续行都添加相同的数量。

我的工具公开了一个名为 calculateTextMetrics() 的方法，该方法使用上述策略并返回测量结果。

https://github.com/tvanc/lineclamp#getting-text-metrics

Answer 6

这对我来说是最好的方式。到目前为止我没有错误

function getLineHeight(element) {

oldHtml = element.innerHTML

element.innerHTML = "A"
lineHeight = element.offsetHeight

element.innerHTML = oldHtml

return lineHeight }

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

6 个答案: