JavaScript：findDIV的行高，而不是CSS属性，但实际的行高
比方说，我有一个DIV： <div></div> ，我想用JS找出它的行高 。 我知道可以检查样式属性style.lineHeight ，但我想检查实际的 行高 ，没有它取决于CSS规则的存在。
假设字体系列和字体大小相同，都应该输出相同的行高 ：
<div>One line of text</div> <div>Two <br /> Lines of text</div>
我怎样才能得到一个JavaScript元素的行高 ？
答案实际上是使用.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 ，删除临时元素，并返回它的高度;
在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' )
这个解决scheme适用于我。 它明确设置时使用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; }
查看currentStyle的IE和getComputedStyle()的其他浏览器（ IE9也支持）。
