如何使用 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

outerHeight 怎么样？

$('br').outerHeight();

https://jsfiddle.net/6fag6tos/

Answer 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'));
  }
})();

<br id="foo" />

Answer 3

好像<br>没有height属性。您也无法在浏览器的检查中看到它的高度。如果<br>后面还有一个元素，可以用这个代码：

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

尝试this。适用于 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();

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

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

html

javascript

css

jquery

height