假设我有一个DIV:<div></div>
,我想用JS找出它的行高是多少。我知道可以检查样式属性style.lineHeight
,但我想检查的实际行高,而不是它,这取决于是否存在规则。
假设字体系列和字体大小相同,两者应该输出相同的行高
<div>One line of text</div>
<div>Two <br /> Lines of text</div>
如何使用JavaScript获取元素的行高?
发布于 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
,删除临时元素,并返回它的高度;
发布于 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' )
发布于 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;
}
https://stackoverflow.com/questions/4392868
复制相似问题