JavaScript:查找DIV的行高，不是CSS属性，而是实际的行高。
JavaScript:查找DIV的行高，不是CSS属性，而是实际的行高。
提问于 2010-12-09 06:08:39
假设我有一个DIV：<div></div>，我想用JS找出它的行高是多少。我知道可以检查样式属性style.lineHeight，但我想检查的实际行高，而不是它，这取决于是否存在规则。
假设字体系列和字体大小相同，两者应该输出相同的行高
<div>One line of text</div>
<div>Two <br /> Lines of text</div>如何使用JavaScript获取元素的行高？
回答 8
Stack Overflow用户
回答已采纳
发布于 2010-12-23 10:43:33
答案实际上是使用.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，删除临时元素，并返回它的高度；
Stack Overflow用户
发布于 2010-12-09 06:21:25
在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' )Stack Overflow用户
发布于 2013-08-25 23:45:15
这个解决方案对我很有效。当显式设置了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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4392868
复制相关文章
相似问题
腾讯云开发者
