Làm thế nào để có được chiều cao của một nhịp?

Question

Có cách nào để lấy số line-height của một span (hoặc phần tử nội tuyến khác) trong JavaScript/jQuery không?

Tôi cần chính xác tính bằng pixel line-height, không giá trị của các loại 1.2em, normal hoặc chẩn đoán như fontSize * 1.5.

Điều tôi cần làm là kéo dài nền của span để lấp đầy toàn bộ chiều cao của đường. Tôi nghĩ rằng tôi có thể thêm miếng đệm để kéo dài khoảng, nhưng đối với điều này tôi cần chính xác line-height. Nếu ai đó có thể đưa ra cách tiếp cận khác, điều này cũng sẽ hữu ích.

Answer 1

$("span").css("line-height"); 

Lấy giá trị px được tính là chuỗi "16px" chẳng hạn. Nó sử dụng currentStyle của IE hoặc tiêu chuẩn getComputedStyle dưới bìa. Đó là loại đáng ngạc nhiên khi nhìn thấy như khi nó hoạt động như một setter nó elem.style.something = value đó là một điều hoàn toàn khác nhau.

Answer 2

giả sử rằng khoảng được chứa trong div.

bạn có thể đặt div thành vị trí: tương đối

và khoảng là khối có chiều cao 100%.

Bằng cách này, bạn sẽ kéo dài khoảng thời gian theo ý muốn.

Ví dụ here (lưu ý:.. Để xem hiệu ứng, thay đổi màu nền của nhịp để minh bạch Bạn sẽ có thể để xem div đỏ)

Answer 3

Nếu thiết kế của bạn cho phép, bạn có thể áp dụng inline-block với các yếu tố bạn đang nhắm mục tiêu và sau đó sử dụng outerHeight ...

var inlineHeight = $('.inline-height').css("display", "inline-block").outerHeight(); 
//console.log('Inline Height:' + inlineHeight); 

Answer 4

Một cách dễ dàng để làm điều này là:

var style = window.getComputedStyle(element); 
var lineHeight = style.getPropertyValue('line-height'); 

Điều này sẽ nhận được giá trị tính toán của chiều cao dòng mà không cần sử dụng jQuery và hoạt động trên tất cả các trình duyệt từ IE9 trở đi.