How to determine a 'line-height' using Javascript (jQuery)? [closed]

Answer 1

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

If this returns a number with px, you can use the number. If it returns a % or a number with no units, you can multiply it by the font size and use that. If it returns normal, I managed to work this up:

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;

This only works with "normal" because you can assume that the line height will always be greater than the font size.

It is based off the idea height % line_height == 0.
Technically num == height / line_height which makes it unknowable. Fortunately the floor of height / font_size is a good heuristic because it and height / line_height are usually the same or close, and if you're off you always overshot - again because "normal" guarantees the line height is greater than the font size - so you can test and try again.

Answer 2

Get and store text, set text temporarily to one line of value (like "x" or "&nbsp"), get and store .height (or .inner, or .outer, whatever you need), replace text with stored value. Show if necessary (eg, the element is hidden), then hide again if necessary.

This (.height) will give you the total line height (font size plus line height adjustment) in a numeral (like 15 for font size 12 and line height 1.25).

Use a hidden div to do all this if necessary, show, get height, hide.

This alert shows the numeral value 15, all browsers:

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

Answer 3

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

Returns line height as a decimal value in pixels, with unit, e.g. "22.5px"

Care should be taken with this solution, as different browsers will report different results. I have found that you cannot use unitless measures with line-height (eg 2.2) in your CSS, as IE6 will report an incorrect result (eg 2px instead of, eg 36px). So I recommend using unit-based line-heights with this measure.

Answer 4

You can't be assured to get a calculated line height in pixels cross-browser. Sometimes the value is 'normal' or 'inherit', which gets calculated in Firefox, but not in IE, for example. One workaround for this (depending of course on your use case) is to get the calculated font-size (which you can see), and multiply it by 1.5, which is fairly standard:

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

Yeah, it's a bit gross, but it will work just fine for things like determining the correct height of an element based on some number of text lines, for example. Keep in mind, that you can/should replace 1.5 with any standard line-height/font-size ratio you may already be using on your site. If you don't know, you can find out by inspecting any copy element in firebug and looking at the calculated a)font-size and b)line-height. Then, replace 1.5 with b/a. :-)

Hope this is helpful!

Answer 5

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