JavaScript: Find DIV's line-height, not CSS property but actual line-height

Question

Let's say I have a DIV: <div></div> and I want to find out with JS what its line-height is. I know one can check the style attribute style.lineHeight, but I want to check the actual line-height, without it depending on the existence of a CSS rule.

Assuming the font family and font size are the same, both should output the same line-height:

<div>One line of text</div> <div>Two <br /> Lines of text</div> 

How can I get the line-height of an element with JavaScript?

Answer 1

The answer is actually using .clientHeight. As Gaby said, this is not really reliable/trustworthy. However, it is! Here:

function getLineHeight(el) {     var temp = document.createElement(el.nodeName), ret;     temp.setAttribute("style", "margin:0; padding:0; "         + "font-family:" + (el.style.fontFamily || "inherit") + "; "         + "font-size:" + (el.style.fontSize || "inherit"));     temp.innerHTML = "A";      el.parentNode.appendChild(temp);     ret = temp.clientHeight;     temp.parentNode.removeChild(temp);      return ret; } 

"Clone" the properties of your element into a new one, get the new's clientHeight, delete the temporary element, and return it's height;

Answer 2

Explained at quirksmode : http://www.quirksmode.org/dom/getstyles.html

example: http://www.jsfiddle.net/gaby/UXNs2/

function getStyle(el,styleProp) {     var x = document.getElementById(el);     if (x.currentStyle)         var y = x.currentStyle[styleProp];     else if (window.getComputedStyle)         var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);     return y; } 

and use it like

getStyle('test', 'line-height' )