How to get height of "br" element using jquery?

Question

I try to get the height of <br /> on my webpage. I use this snippet.

br_size = $('br').height();
console.log(br_size);

But only the Mozilla Firefox like this code, all other browsers give back 0. Is there a short JS code that gives me the correct height back?

PS: i use this method, because i know that the needed size X is X= other_size - 4*br_size

Answer 1

The line-break depends on the line-height specified in the HTML/BODY tags, if one isn't specified then the browser will likely use their own. However, if you specify a line-height, say 20px then the line-break should be 20px. You could probably use JavaScript to determine the default line-height

(function() {
  var br = document.getElementById('foo');
  alert(br.scrollHeight);
  if (br.currentStyle) {
    alert(br.currentStyle['lineHeight']);
  } else {
    alert(document.defaultView.getComputedStyle(br, null).getPropertyValue('line-height'));
  }
})();

<br id="foo" />