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

Question

Well, encountered the need of a line-height coding a plugin, so, can you give an advice, please? Thanks)

Answer 1

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!