JavaScript:查找DIV的行高,而不是CSS属性,而是实际的行高

Question

假设我有一个DIV:<div></div>我想知道JS的行高是多少.我知道可以检查样式属性style.lineHeight,但我想检查实际的 行高,没有它取决于CSS规则的存在.

假设字体系列和字体大小相同,两者都应输出相同的行高:

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

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

Answer 1

答案实际上是在使用.clientHeight.正如盖比所说,这不是真的可靠/值得信赖.但是,它是!这里:

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

现在使用window.getComputedStyle.

function getLineHeight(el: HTMLSpanElement) {
  return window.getComputedStyle(el).lineHeight;
}

Answer 5

请参阅currentStyleIE 和getComputedStyle()其他浏览器（IE9也支持）。