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

Question

比方说，我有一个DIV: <div></div> 我想用JS找出它的... 线高 是。我知道可以检查样式属性 style.lineHeight但我想检查一下 实际 线高，而不依赖于CSS规则的存在。

假设字体系列和字体大小相同，两者的输出应该是相同的 线高:

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

我怎样才能得到 线高 的元素？

Answer 1

其实答案是使用 .clientHeight. 作为 盖比 说，这其实并不靠谱。然而，它就是! 在这里。

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删除临时元素，并返回它的高度。

Answer 2

详见quirksmode。http:/www.quirksmode.orgdomgetstyles.html

例如 http:/www.jsfiddle.netgabyUXNs2

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

参见 currentStyle 对于IE和 getComputedStyle() 其他浏览器（也支持 IE9).