如何使用jquery获取“br”元素的高度？

Question

我试着在我的网页上获得<br />的高度。 我用这个片段。

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

但只有Mozilla Firefox喜欢这个代码，所有其他浏览器都会返回0.是否有一个简短的JS代码可以给我正确的高度？

PS：我使用这种方法，因为我知道所需的大小X是X= other_size - 4*br_size

Answer 1

换行符取决于HTML / BODY标记中指定的行高，如果未指定行高，则浏览器可能会使用自己的行。 但是，如果指定行高，例如20px，则换行符应为20px。 您可以使用JavaScript来确定默认的行高

 (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

试试这个 。 适用于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

outerHeight怎么样？

$('br').outerHeight();

https://jsfiddle.net/6fag6tos/

Answer 4

它似乎没有<br>具有height财产。 在浏览器检查中你也看不到它的高度。 如果在<br>之后还有另一个elemetn，您可以使用以下代码：

 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>