How to get the line height of a span?

Question

Is there a way to get the line-height of a span (or other inline element) in JavaScript/jQuery?

I need the exact computed line-height in pixels, not values of the sort 1.2em, normal or heuristics like fontSize * 1.5.

What I need to do is stretch the background of a span to fill the whole height of the line. I figured that I could add paddings to stretch the span, but for this I need the exact line-height. If someone can offer another approach, this would also be helpful.

Answer 1

An easy way to do this is:

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

This will get the calculate value of the line height without using jQuery and works on all browsers from IE9 onwards.

Answer 2

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

Retrieves the computed px value as a string "16px" for example. It uses IE's currentStyle or the standard getComputedStyle under the covers. Which is kind of surprising seeing as when it works as a setter it does elem.style.something = value which is a whole different thing.