Làm thế nào để có được chiều cao của phần tử "br" bằng cách sử dụng jquery?

Question

Tôi cố gắng để có được chiều cao <br /> trên trang web của tôi. Tôi sử dụng đoạn mã này.

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

Nhưng chỉ Mozilla Firefox như mã này, tất cả các trình duyệt khác trả lại 0. Có một mã ngắn JS mà mang lại cho tôi chiều cao chính xác trở lại?

PS: tôi sử dụng phương pháp này, bởi vì tôi biết rằng kích thước cần thiết X là X= other_size - 4*br_size

Answer 1

Dòng-break phụ thuộc vào line-height quy định tại các thẻ HTML/BODY, nếu ai không quy định thì trình duyệt có khả năng sẽ sử dụng riêng của họ. Tuy nhiên, nếu bạn chỉ định chiều cao dòng, hãy nói 20px thì ngắt dòng phải là 20px. Bạn có thể có thể sử dụng JavaScript để xác định mặc định 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

Làm thế nào về outerHeight?

$('br').outerHeight(); 

https://jsfiddle.net/6fag6tos/

Answer 3

Nó dường như không <br> có height tài sản. Ngoài ra bạn không thể nhìn thấy nó chiều cao trong kiểm tra trình duyệt. Nếu có một elemetn sau <br>, bạn có thể sử dụng mã này:

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

Hãy thử this. Hoạt động trên 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();