JavaScript：查找 DIV 的行高，不是 CSS 属性而是实际行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4392868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript: Find DIV's line-height, not CSS property but actual line-height
提问by JCOC611
Let's say I have a DIV: <div></div>and I want to find out with JS what its line-heightis. I know one can check the style attribute style.lineHeight, but I want to check the actualline-height, without it depending on the existence of a CSS rule.
假设我有一个 DIV:<div></div>我想用 JS 找出它的行高是什么。我知道可以检查 style 属性style.lineHeight，但我想检查实际的line-height，没有它取决于 CSS 规则的存在。
Assuming the font family and font size are the same, both should output the same line-height:
假设字体系列和字体大小相同，两者都应该输出相同的line-height：
<div>One line of text</div>
<div>Two <br /> Lines of text</div>
How can I get the line-heightof an element with JavaScript?
如何使用 JavaScript获取元素的行高？
采纳答案by JCOC611
The answer is actually using .clientHeight. As Gabysaid, this is not really reliable/trustworthy. However, it is! Here:
答案实际上是使用.clientHeight. 正如Gaby所说，这并不是真正可靠/值得信赖的。然而，它是！这里：
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;
}
"Clone" the properties of your element into a new one, get the new's clientHeight, delete the temporary element, and return it's height;
将元素的属性“克隆”为新元素，获取新clientHeight元素，删除临时元素，并返回其高度；
回答by Gabriele Petrioli
Explained at quirksmode : http://www.quirksmode.org/dom/getstyles.html
在 quirksmode 解释：http://www.quirksmode.org/dom/getstyles.html
example: http://www.jsfiddle.net/gaby/UXNs2/
示例：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;
}
and use it like
并像使用它一样
getStyle('test', 'line-height' )
回答by furf
This solution works for me. It uses the value of the line-heightproperty when it has been set explicitly or, when the value has not been set, it calculates the value by finding the difference in the height of the object when its contents are augmented by one line.
这个解决方案对我有用。它使用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;
}
回答by Phrogz
See currentStylefor IE and getComputedStyle()for other browsers (also supported by IE9).
请参阅currentStyleIE 和getComputedStyle()其他浏览器（IE9也支持）。
