如何使用Javascript（jQuery）确定“line-height”？

Question

嗯，遇到需要编写一个line-height插件的需求了，请问能给些建议吗？谢谢）

- Aleksey

Answer 1

跨浏览器无法确保获得计算后的行高像素值。有时候该值是“normal”或“inherit”，在Firefox中可以计算，但在IE中却不能。 一个解决方法（当然要根据您的用例）是获取计算后的字体大小（您可以看到），并将其乘以1.5，这是相当标准的做法（参见此链接）：

var fontSize = $(el).css('font-size');
var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);

是的，这有点恶心，但它完全可以用于确定基于某些文本行数的元素的正确高度，例如。 请记住，您可以/应该使用您网站上已经使用的任何标准行高/字体大小比率替换1.5。 如果您不知道，可以通过检查firebug中的任何副本元素并查看计算出的a）字体大小和b）行高来找出。 然后，将1.5替换为b / a。 :-)

希望这对您有所帮助！

- John Quaresma

---

这是我找到的最佳解决方案！非常感谢你！ - Vito Gentile

如果您将行高设置为无单位值（这是MDN推荐的），在IE中此方法将不起作用。请参见我的演示。 - Alan H.

你可能想使用parseFloat而不是parseInt，因为如果你的字体大小有小数值，使用parseFloat可以得到更准确的行高值。Alan，John已经硬编码了一个行高值而不是计算它，所以你的评论对这个答案似乎不相关。 - Matty J

Answer 2

$('selector').css('line-height');

- c_harm

---

哦，谢谢，我不知道为什么会忘记.css()不仅可以设置值，还可以获取值... - Aleksey

请记得在答案正确时将其标记为正确！=） - Christopher Done

错误。在歌剧中它返回“正常”。 - Vitaliy Ulantikov

小心 - 在许多浏览器中，您会得到一个看起来像 16px 的值，但在 IE 中，有时您可能会得到一个裸露的数字，如 1.2。 - Alan H.

另一个注意事项：$('#Div1').css('line-height') * numberOfLinesDiv1Has 不总等于 $('#Div1').height()（但通常非常接近）。 - cprcrack

Answer 3

$('selector').css('line-height');

如果返回的是带有 px 单位的数字，则可以直接使用该数字。 如果返回的是 % 或者没有任何单位的数字，则可以乘以字体大小后使用。 如果返回的是 normal，则我已经想到了以下解决方案：

var height = $element.height();
var font_size = parseInt($element.css('font-size'));
var num = Math.floor(height / font_size);
for(; height % (height / num) != 0; --num)
    ;
return height / num;

只有在“normal”情况下才有效，因为您可以假定行高始终大于字体大小。

它基于思想 height % line_height == 0。技术上讲，num == height / line_height 是无法知道的。幸运的是，height / font_size 的底部是一个很好的启发式方法，因为它和 height / line_height 通常是相同或接近的，并且如果您错误，您总是过度 - 再次因为 “normal” 保证行高大于字体大小 - 因此您可以测试并重试。

- Obbl

---

var font_size = functionThatMakesThisANumber($element.css('font-size')); can be simplified, you don't need a custom function. Use parseInt instead : var font_size = parseInt($element.css('font-size')) - TwystO

@Twist 我也注意到了。已更新！ - Swivel

Answer 4

获取并存储文本，将文本临时设置为一个值的一行（如“x”或“&nbsp”），获取并存储 .height（或 .inner 或 .outer，您需要什么就用什么），用存储的值替换文本。如果必要，显示元素（例如，该元素已隐藏），然后再次隐藏。

这个（.height）将给你一个数字中的总行高度（字体大小加上行高度调整），例如 15 表示字体大小为 12，行高为 1.25。

如果需要，使用隐藏的 div 来执行所有这些操作，显示、获取高度、隐藏。

此警报在所有浏览器中显示数字值 15：

<div id="TestDiv">
    Any text you want.
</div>

    jQuery(document).ready(function()
{
    var TestText = $("#TestDiv").text();
    var TestDivLineHeight = $("#TestDiv")
        .css("font-size", "12px").css("line-height", "1.25").text("x").height();
    alert(TestDivLineHeight);
    $("#TestDiv").text(TestText);
});

- Jack Herr

---

从原始帖子中进行编辑，将“12”更改为“12px”。 - Jack Herr

如果你想要正确的Internet Evil 6和7值，还需要小心消除顶部和底部的填充。 - Jack Herr

Answer 5

$('selector').css('line-height');

以像素为单位返回行高的十进制值，带有单位，例如“22.5px”

需要注意的是，不同的浏览器会报告不同的结果。我发现您不能在CSS中使用无单位的度量（例如2.2）来设置行高，因为IE6会报告错误的结果（例如2px而不是36px）。因此，我建议使用基于单位的行高。

- kenneth

---

这将返回CSS中属性的值，不一定是像素值。例如，它可以是字符串“'normal'”。 - Vebjorn Ljosa

请注意，在许多浏览器中，您会得到一个看起来像16px的值，但在IE中，有时您可能会得到一个裸的数字，例如1.2。而且请注意，您并不仅仅会得到CSS中使用的任何单位。请查看：http://jsfiddle.net/alanhogan/a6a8P/ - Alan H.