Jak uzyskać wysokość linii przęsła?

Czy istnieje sposób na uzyskanie line-height (lub innego elementu wbudowanego) w JavaScript/jQuery?Jak uzyskać wysokość linii przęsła?

muszę dokładny obliczane line-height w pikselach, nie Wartości rodzaju 1.2em, normal lub heurystyki jak fontSize * 1.5.

Co muszę zrobić, to rozciągnąć tło span, aby wypełnić całą wysokość linii. Pomyślałem, że mogę dodać podkładki, żeby rozciągnąć rozpiętość, ale do tego potrzebuję dokładnie line-height. Jeśli ktoś może zaoferować inne podejście, byłoby to również pomocne.

Źródło

2011-12-22 Radan Ganchev

Twoja span musi mieć wyświetlacz: block, coś takiego jak 'span {line-height: 12px; display: block;} ' –

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

Pobiera obliczoną wartość px jako ciąg "16px" na przykład. Używa IE currentStyle lub standard getComputedStyle pod okładkami. Co jest zaskakujące, ponieważ kiedy działa jako seter, robi to zupełnie inną rzecz.

Źródło

2011-12-22 16:11:23 Esailija

Jako kopia zapasowa TFM: http://api.jquery.com/css/ ;-) – PPvG

To była pierwsza rzecz, którą próbowałem, oczywiście. Niestety, w przeglądarkach WebKit zwraca ciąg znaków "normal", chyba że wcześniej ustawię 'line-height' ręcznie. Korzystam z jQuery 1.6.1. Czy ma inne zachowanie w późniejszych wersjach? –

@RadanGanchev masz rację, to zwraca normalne dla niektórych elementów. '[] .forEach.call (document.getElementsByTagName (" * "), function (v) { console.log (getComputedStyle (v) .lineHeight); });' Uruchamianie zwracające wartość px na tej stronie dla większości elementy jednak. – Esailija

przy założeniu, że rozpiętość jest zawarta w div.

można ustawić div position: relative

i zakresu w bloku, który zajmuje 100% wysokości.

W ten sposób rozciągniesz zakres w dowolny sposób.

Przykład here (uwaga:.., Aby zobaczyć efekt, zmienić kolor tła rozpiętości do przejrzystych, powinny być w stanie zobaczyć czerwoną div)

Źródło

2011-12-22 16:13:33 Rdpi

Używam 'span', ponieważ potrzebuję element śródliniowy. Moim celem jest zaznaczenie tekstu, który może zacząć się w środku linii. 'display: block' nie działa dla mnie. –

Jeżeli konstrukcja na to pozwala, można zastosować inline-block do elementów, które są kierowane, a następnie użyć outerHeight ...

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

Źródło

2013-05-17 18:00:14

Łatwym sposobem, aby to zrobić, to:

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

Otrzyma on obliczoną wartość wysokości linii bez użycia jQuery i działa we wszystkich przeglądarkach od IE9.

Źródło

2016-03-01 12:33:32 Ashh640

Jak uzyskać wysokość linii przęsła?

Odpowiedz

Powiązane problemy