JavaScript:Find DIV'；s线高度，不是CSS属性，而是实际线高度

假设我有一个DIV:

，我想通过JS了解它的行高度。我知道可以检查style属性

style.lineHeight

，但我想检查实际的行高，而不检查行高取决于CSS规则的存在

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

一行文本
两行
文本

---

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

请参阅IE和其他浏览器（也受支持）。

在quirksmode中解释：

例如：

像这样使用它

getStyle('test', 'line-height' )

---

答案实际上是使用

.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

，删除临时元素，并返回其高度

这个解决方案适合我。如果已明确设置了

行高

属性的值，则该属性使用该值；如果未设置该值，则当对象的内容增加一行时，该属性通过查找对象的高度差来计算该值

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;
}

函数计算重量（元素）{
var lineHeight=parseInt（getStyle（元素，'lineHeight'），10）；
变种克隆；
var单线高度；
var双线高度；
if（isNaN（线宽））{
clone=element.cloneNode（）；
clone.innerHTML=“
”；
元素。追加子元素（克隆）；
单线高度=clone.offsetHeight；
clone.innerHTML='

'；
doubleLineHeight=clone.offsetHeight；
element.removeChild（克隆）；
线宽=双线高-单线高；
}
返回线高度；
}

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

你不能只检查线的高度。有时这是正常的，根本没有帮助

您不能将文本放入另一个元素中，因为它可能接收不同的样式

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

我的工具公开了一个名为

calculateTextMetrics（）

的方法，该方法使用上述策略并返回结果度量

---

假设元素引用HTML DIV元素，

元素。currentStyle

返回未定义的元素和

元素。getComputedStyle（）

在Chrome中抛出错误（也未定义）。虽然第二个答案中解释了此方法，但它返回的是“正常”而不是数字，但非常有趣，至少在Chrome中。我不确定您是否可以从该案例中获得更多信息，因为

normal

是

行高的有效值。确实看到了，但当我写这个问题时，我正在寻找类似
.clientWidth（）
的东西，它用于检索元素的“真实”宽度。您可以使用元素的
clientHeight
，但它只需要一行就可以工作（并且没有填充等。不太可靠）。还要注意，IE也将返回
normal
，需要使用
lineHeight
调用它，而不是
lineHeight
。是的，我想知道是否有任何方法可以像
.clientHeight（）
获取元素高度那样获取行高度。不过，请小心，因为您要将它附加到文档中，它将继承该零件的样式。这并不意味着您测试的元素具有相同的
行高
，因为某些内部规则可能会覆盖它。。
行高度在整个文档中并不是恒定的。.我想我刚刚解决了它，我从一开始就想到了这一点，但我有点懒得把它放在那里lol.我用
元素替换了
文档
。parentNode
：D@Davy8字体我很高兴这么长时间后这仍然有用@MuhammadUmer:看看其他两个答案，你就会明白为什么它不是一个真正的选项。@MuhammadUmer:是的，虽然它可能取决于很多事情……所以知道一个精确的值比一个模棱两可的正常值要好。
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;
}

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;
}