如何获得跨度的线高？

Posted 2023-05-09

【中文标题】如何获得跨度的线高？

【英文标题】：How to get the line height of a span?

【发布时间】：2012-01-26 06:06:47

【问题描述】：

有没有办法在 javascript/jQuery 中获取 span（或其他内联元素）的 line-height？

我需要精确计算的line-height（以像素为单位），而不是1.2em、normal 或fontSize * 1.5 之类的启发式算法。

我需要做的是拉伸span 的背景以填充线条的整个高度。我想我可以添加填充来拉伸跨度，但为此我需要确切的line-height。如果有人可以提供另一种方法，这也会有所帮助。

【问题讨论】：

你的 span 需要有 display:block，比如span line-height:12px; display:block;

【参考方案1】：

$("span").css( "line-height");

例如，以字符串“16px”的形式检索计算得到的 px 值。它使用 IE 的currentStyle 或标准的getComputedStyle。这有点令人惊讶，因为当它作为二传手工作时，它会做elem.style.something = value，这是完全不同的事情。

【讨论】：

当然，这是我尝试的第一件事。不幸的是，在 WebKit 浏览器上，它返回字符串“正常”，除非我提前手动设置了 line-height。我正在使用 jQuery 1.6.1。它在以后的版本中有不同的行为吗？

@RadanGanchev 你是对的，它对某些元素返回正常。 [].forEach.call( document.getElementsByTagName("*"), function(v) console.log ( getComputedStyle(v).lineHeight ); ); 运行时会在此页面上为大多数元素返回 px 值。

@Esailija 是的，如果您检查此页面上的元素，您会发现它们中的大多数在 CSS 中设置了 line-height，而少数具有默认的 line-height。对于默认line-height 的那些仍然显示“正常”。我也在我的网站上对其进行了测试，但仍然无法正常工作。

@RadanGanchev 我在fontSize 上运行它，我得到了所有的 px 值 - 也许 font-size px 值在正常时用作行高？ w3.org/TR/CSS21/visudet.html#propdef-line-height

@Esailija 是的，fontSize 计算正确。不幸的是，行高几乎永远不会等于字体大小。我认为它取决于浏览器，在大多数浏览器中，它类似于lineHeight = fontSize * 1.5（即line-height: normal）。

【参考方案2】：

一个简单的方法是：

var style = window.getComputedStyle(element);
var lineHeight = style.getPropertyValue('line-height');

这将在不使用 jQuery 的情况下获得行高的计算值，并且适用于从 IE9 开始的所有浏览器。

【讨论】：

这将在大多数情况下返回"normal"，而不是像素值。

【参考方案3】：

假设 span 包含在 div 中。

您可以将 div 设置为 position:relative

跨度为一个占用 100% 高度的块。

通过这种方式，您将根据需要拉伸跨度。

例如here （注意：要查看效果，将span的背景颜色改为透明即可。应该可以看到红色的div。）

【讨论】：

我使用的是span，因为我需要一个内联元素。我的目标是标记一些可能从一行中间开始的文本。 display: block 不适合我。

【参考方案4】：

如果您的设计允许，您可以将 inline-block 应用于您要定位的元素，然后使用outerHeight ...

var inlineHeight = $('.inline-height').css("display", "inline-block").outerHeight(); 
//console.log('Inline Height:' + inlineHeight);