如何使用 Javascript (jQuery) 确定“行高”？ [关闭]

Question

嗯，遇到了需要对插件进行行高编码的需求，请问您能给个建议吗？ 谢谢）

Answer 1

您无法确保跨浏览器获得以像素为单位的计算行高。例如，有时该值是“正常”或“继承”，它在 Firefox 中计算，但在 IE 中不计算。一种解决方法（当然取决于您的用例）是获取计算出的字体大小（您可以看到），并将其乘以 1.5，这相当 standard: p>

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 来找出答案。然后，将 1.5 替换为 b/a。 :-)

希望对您有所帮助！

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');

以像素为单位的十进制值返回行高，单位为 e.g. "22.5 像素"

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

Answer 5

获取和存储文本，将文本临时设置为一行值（如“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);
});