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

【问题标题】：How to get height of "br" element using jquery?如何使用 jquery 获取“br”元素的高度？
【发布时间】：2017-01-21 22:02:49
【问题描述】：

我尝试在我的网页上获取<br /> 的高度。我用这个sn-p。

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

但是只有Mozilla Firefox这样的代码，所有其他浏览器都返回0。是否有一个简短的 JS 代码可以让我恢复正确的高度？

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

【问题讨论】：

也许您应该尝试使用line-height css 属性计算高度。
你应该看看这个topic
我发布的答案包含新的解决方案。

标签： javascript jquery html css height

【解决方案1】：

outerHeight 怎么样？

$('br').outerHeight();

https://jsfiddle.net/6fag6tos/

【讨论】：

不起作用...您的 outerHeight() 显示 2px，因为您通过 CSS 设置了边框

【解决方案2】：

换行符取决于 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'));
  }
})();

&lt;br id="foo" /&gt;

【讨论】：

对我有用，第一个警报是“0”，但第二个总是正确的。
在 Chrome 上 52 秒警报是“正常的”
找到了一个跨浏览器的解决方案。看我的回答。
@DenisSheremet，如果你定义了一些东西，你绝对可以访问它，我们谈论的是默认值。 ;)
我想有两种不同的方法可以解决这个问题：定义具有相同高度的假元素，或者尝试解析浏览器特定的 line-height 值。 Afaik normal 可能在浏览器之间有不同的数值，所以第一种方式更可靠

【解决方案3】：

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

【讨论】：

【解决方案4】：

试试this。适用于铬。

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

【讨论】：

不错的解决方案。谢谢丹尼斯。