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" /> 

Answer 2

Try this . Works on chrome.

var br = $('br').first();
var div = $('<div>Text</div>');

div.css({
  'font-size': br.css('font-size'),
  'line-height': br.css('line-height'),
  'position': 'fixed',
  'visibility': 'hidden',
});

$('body').append(div);

alert(div.outerHeight());

div.remove();

Answer 3

How about outerHeight?

$('br').outerHeight();

https://jsfiddle.net/6fag6tos/

Answer 4

It does not seem <br> has height property. Also you can't see it height in inspect of browser. If there is another elemetn after <br> , you can use this code:

 var height = $("br").next().position().top - $("br").position().top console.log(height); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Hello</p> <br/> <p>Goodbye</p>