Question

嗯，遇到了一个插件行高编码的需要，那么，你能给出一个建议吗？感谢）

Answer 1

您无法确保跨浏览器获得以像素为单位的计算线高。有时值是'normal'或'inherit'，它在Firefox中计算，但在IE中不计算，例如。解决此问题的一种解决方法（当然取决于您的用例）是获取计算出的字体大小（您可以看到的），并将其乘以1.5，这是相当standard：

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

是的，它有点粗略，但它可以很好地用于确定基于某些文本行的元素的正确高度等事情。请注意，您可以/应该使用您在网站上使用的任何标准行高/字体大小比例替换1.5。如果您不知道，可以通过检查firebug中的任何复制元素并查看计算出的a）font-size和b）line-height来查找。然后，用b / a替换1.5。 :-)

希望这有用！

Answer 2

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

Answer 3

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

如果返回带有px的数字，则可以使用该数字。如果它返回％或没有单位的数字，您可以将其乘以字体大小并使用它。如果它恢复正常，我设法解决了这个问题：

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;

这仅适用于“普通”，因为您可以假设线条高度始终大于字体大小。

它基于height % line_height == 0的想法技术上num == height / line_height使其变得不可知。幸运的是height / font_size的底线是一个很好的启发式，因为它和height / line_height通常是相同或接近的，如果你关闭了你总是超过 - 再次因为“正常”保证线高度大于字体大小 - 所以你可以测试并再试一次。

Answer 4

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

以像素为单位返回行高，作为十进制值，单位为“22.5px”

应该注意此解决方案，因为不同的浏览器会报告不同的结果。我发现你不能在CSS中使用行高（例如2.2）的无单位度量，因为IE6会报告错误的结果（例如2px而不是36px）。因此，我建议使用基于单位的线高度。

Answer 5

获取并存储文本，将文本临时设置为一行值（如“x”或“＆amp; nbsp”），获取并存储.height（或.inner，或.outer，无论您需要什么），替换文本具有储值。必要时显示（例如，隐藏元素），然后在必要时再次隐藏。

这个（.height）会给你一个数字的总行高（字体大小加行高调整）（比如字体大小12和行高1.25的15）。

使用隐藏的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);
});

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

5 个答案: