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

Question

I am trying to get the height <br /> on my webpage. I am using this snippet.

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

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

PS: I use this method because I know that the required size of X is X= other_size - 4*br_size

Answer 1

The line break depends on the height of the line specified in the HTML / BODY tags, if one is not specified, the browser will most likely use its own. However, if you specify a line height of, say, 20px, then the line break should be 20px. You can 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

What about outerHeight?

 $('br').outerHeight(); 

https://jsfiddle.net/6fag6tos/

Answer 3

It seems that <br> has a height property. Also, you cannot see its height when checking the browser. If there is another element 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> 

Answer 4

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