blocks|key|288430|text|请参阅适用于IE的currentStyle和适用于其他浏览器的getComputedStyle()+(IE9也支持)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|288431|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/ms536497%2528VS.85%2529.aspx|1|https://developer.mozilla.org/En/DOM%253awindow.getComputedStyle|2|http://msdn.microsoft.com/en-us/library/ff975168%2528VS.85%2529.aspx^0|9|C|V|I|9|C|0|V|I|1|1F|3|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@$9|W|A|X|1|Y]|$9|Z|A|10|1|11]|$9|12|A|13|1|14]]|E|$]]|$1|F|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]|N|$5|I|J|K|E|$L|O]]|P|$5|I|J|K|E|$L|Q]]]]

See <a href="http://msdn.microsoft.com/en-us/library/ms536497%28VS.85%29.aspx" rel="noreferrer"><code>currentStyle</code></a> for IE and <a href="https://developer.mozilla.org/En/DOM%3awindow.getComputedStyle" rel="noreferrer"><code>getComputedStyle()</code></a> for other browsers (also supported by <a href="http://msdn.microsoft.com/en-us/library/ff975168%28VS.85%29.aspx" rel="noreferrer">IE9</a>).

blocks|key|3005796|text|在quirksmode模式下解释：http://www.quirksmode.org/dom/getstyles.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3005797|示例：http://www.jsfiddle.net/gaby/UXNs2/|3005798|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;
}|code-block|syntax|javascript|3005799|并像这样使用它|3005800|getStyle('test',+'line-height'+)|3005801|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/dom/getstyles.html|1|http://www.jsfiddle.net/gaby/UXNs2/^0|H|18|0|0|3|Z|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|F|3|G|5|H|7|16|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

Explained at quirksmode : <a href="http://www.quirksmode.org/dom/getstyles.html" rel="noreferrer">http://www.quirksmode.org/dom/getstyles.html</a>

example: <a href="http://www.jsfiddle.net/gaby/UXNs2/" rel="noreferrer">http://www.jsfiddle.net/gaby/UXNs2/</a>

<pre><code>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;
}
</code></pre>

and use it like

<pre><code>getStyle('test', 'line-height' )
</code></pre>

blocks|key|3219517|text|答案实际上是使用.clientHeight。正如Gaby所说，这并不是真正可靠/值得信赖的。然而，它就是！这里：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3219518|function+getLineHeight(el)+{
++++var+temp+=+document.createElement(el.nodeName),+ret;
++++temp.setAttribute("style",+"margin:0;+padding:0;+"
++++++++%2B+"font-family:"+%2B+(el.style.fontFamily+%7C%7C+"inherit")+%2B+";+"
++++++++%2B+"font-size:"+%2B+(el.style.fontSize+%7C%7C+"inherit"));
++++temp.innerHTML+=+"A";

++++el.parentNode.appendChild(temp);
++++ret+=+temp.clientHeight;
++++temp.parentNode.removeChild(temp);

++++return+ret;
}|code-block|syntax|javascript|3219519|“克隆”你的元素的属性到一个新的元素中，获得新的clientHeight，删除临时元素，并返回它的高度；|3219520|entityMap^0|8|D|0|0|O|C|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

The answer is actually using <code>.clientHeight</code>. As Gaby said, this is not really reliable/trustworthy. However, it is! Here:

<pre><code>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;
}
</code></pre>

"Clone" the properties of your element into a new one, get the new's <code>clientHeight</code>, delete the temporary element, and return it's height;

blocks|key|3005803|text|这个解决方案对我很有效。当显式设置了line-height属性的值时，它使用该属性的值；如果尚未设置该值，则当对象的内容增加一行时，它通过查找对象高度的差异来计算该值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3005804|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+=+' ';
++++element.appendChild(clone);
++++singleLineHeight+=+clone.offsetHeight;
++++clone.innerHTML+=+' ';
++++doubleLineHeight+=+clone.offsetHeight;
++++element.removeChild(clone);
++++lineHeight+=+doubleLineHeight+-+singleLineHeight;
++}

++return+lineHeight;
}|code-block|syntax|javascript|3005805|entityMap^0|I|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

This solution works for me. It uses the value of the <code>line-height</code> property 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. 

<pre><code>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 = '&lt;br&gt;';
 element.appendChild(clone);
 singleLineHeight = clone.offsetHeight;
 clone.innerHTML = '&lt;br&gt;&lt;br&gt;';
 doubleLineHeight = clone.offsetHeight;
 element.removeChild(clone);
 lineHeight = doubleLineHeight - singleLineHeight;
 }

 return lineHeight;
}
</code></pre>

blocks|key|3005810|text|这是相当复杂的。我制作了一个npm包，用于将文本限制到一定的行数或像素高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3005811|你不能只检查行高。有时这是normal，这是没有任何帮助的。|offset|length|style|CODE|3005812|您不能将文本放入另一个元素中，因为它可能会接收不同的样式。|3005813|我发现最可靠的方法是删除元素中的所有文本并测量其高度。然后添加一条线并测量高度。第一行添加的高度并不总是与后续行的高度相同。然后添加另一行。第二行和所有后续行都添加了相同的量。|3005814|我的工具公开了一个名为calculateTextMetrics()的方法，该方法使用上述策略并返回结果度量结果。|3005815|https://github.com/tvanc/lineclamp#getting-text-metrics|3005816|entityMap|0|LINK|mutability|MUTABLE|url^0|0|D|6|0|0|0|B|M|0|0|1J|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@$D|13|E|14|F|G]]|9|@]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|P|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|O]]]]

It’s fairly complicated. I made an npm package for clamping text to a certain number of lines or a pixel height.
You can’t just check line-height. Sometimes that’s <code>normal</code> which is no help at all.
You can’t put the text in another element because it may receive different styles.
The most solid method I found was to remove all text from the element and measure its height. Then add a line and measure the height. the height the first line adds isn’t always the same as subsequent lines. Then add another line. The second and all subsequent lines all add the same amount.
My tool exposes a method called <code>calculateTextMetrics()</code> that which uses the above strategy and returns the resulting measurements.
<a href="https://github.com/tvanc/lineclamp#getting-text-metrics" rel="nofollow noreferrer">https://github.com/tvanc/lineclamp#getting-text-metrics</a>

blocks|key|289321|text|这对我来说是最好的方式。到目前为止对我来说没有错误|type|unstyled|depth|inlineStyleRanges|entityRanges|data|289322|function+getLineHeight(element)+{

oldHtml+=+element.innerHTML

element.innerHTML+=+"A"
lineHeight+=+element.offsetHeight

element.innerHTML+=+oldHtml

return+lineHeight+}|code-block|syntax|javascript|289323|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is the best way to me. No error for me so far
<pre><code>function getLineHeight(element) {

oldHtml = element.innerHTML

element.innerHTML = &quot;A&quot;
lineHeight = element.offsetHeight

element.innerHTML = oldHtml

return lineHeight }
</code></pre>

blocks|key|3005821|text|现在使用window.getComputedStyle很容易做到这一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3005822|function+getLineHeight(el:+HTMLSpanElement)+{
++return+window.getComputedStyle(el).lineHeight;
}|code-block|syntax|javascript|3005823|entityMap^0|4|N|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

This is easy now with <code>window.getComputedStyle</code>.
<pre class="lang-js prettyprint-override"><code>function getLineHeight(el: HTMLSpanElement) {
 return window.getComputedStyle(el).lineHeight;
}
</code></pre>

blocks|key|291683|text|一种直观的方法(不需要引用元素)是使用selection和range+API来获取光标高度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|291684|const+range+=+window.getSelection().getRangeAt(0);
const+height+=+(range.getClientRects()[0]).height;|code-block|syntax|javascript|291685|参考：https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects|291686|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects^0|J|9|T|5|0|0|3|1Z|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

One intuitive way (that doesn't require element reference) is to use <code>selection</code> and <code>range</code> APIs to get cursor height.
<pre class="lang-js prettyprint-override"><code>const range = window.getSelection().getRangeAt(0);
const height = (range.getClientRects()[0]).height;
</code></pre>
ref: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects</a>

Let's say I have a DIV: <code>&lt;div&gt;&lt;/div&gt;</code> and I want to find out with JS what its line-height is. I know one can check the style attribute <code>style.lineHeight</code>, but I want to check the actual line-height, without it depending on the existence of a CSS rule.

Assuming the font family and font size are the same, both should output the same line-height:

<pre><code>&lt;div&gt;One line of text&lt;/div&gt;
&lt;div&gt;Two &lt;br /&gt; Lines of text&lt;/div&gt;
</code></pre>

How can I get the line-height of an element with JavaScript?

JavaScript: Find DIV's line-height, not CSS property but actual line-height

假设我有一个DIV：<div></div>，我想用JS找出它的行高是多少。我知道可以检查样式属性style.lineHeight，但我想检查的实际行高，而不是它，这取决于是否存在规则。假设字体系列和字体大小相同，两者应该输出相同的行高<div>One line of text</div><div>Two ...

问JavaScript:查找DIV的行高，不是CSS属性，而是实际的行高。
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript:查找DIV的行高，不是CSS属性，而是实际的行高。EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript:查找DIV的行高，不是CSS属性，而是实际的行高。
EN