Question

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

我需要精确计算的line-height像素，而不是排序1.2em，normal的值或fontSize * 1.5等启发式。

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

Answer 1

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

例如，将计算出的px值检索为字符串“16px”。它使用IE的currentStyle或标准getComputedStyle。这有点令人惊讶，因为当它作为一个制定者时它会elem.style.something = value这是一个完全不同的东西。

Answer 2

一种简单的方法是：

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

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

Answer 3

假设跨度包含在div中。

你可以将div设置为position：relative

并将跨度作为一个占据100％高度的块。

通过这种方式，您可以根据需要拉伸范围。

示例here （注意：要查看效果，请将跨度的背景颜色更改为透明。您应该能够看到红色div。）

Answer 4

如果您的设计允许，您可以将内联块应用于您定位的元素，然后使用outerHeight ...

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