Come ottenere l'altezza della linea di una campata?

C'è un modo per ottenere lo line-height di un span (o altro elemento in linea) in JavaScript/jQuery?Come ottenere l'altezza della linea di una campata?

ho bisogno del esatta calcolato line-height in pixel, non i valori del genere 1.2em, normal o euristica come fontSize * 1.5.

Quello che devo fare è allungare lo sfondo di un span per riempire l'intera altezza della linea. Ho pensato che avrei potuto aggiungere padding per allungare lo span, ma per questo ho bisogno dell'esatto numero line-height. Se qualcuno può offrire un altro approccio, questo sarebbe anche utile.

fonte

2011-12-22 Radan Ganchev

La tua span deve avere display: block, qualcosa come 'span {line-height: 12px; display: block;} ' –

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

Recupera il valore di px calcolato come una stringa "16px" ad esempio. Utilizza IE currentStyle o lo standard getComputedStyle sotto le copertine. Il che è un po 'sorprendente visto che quando funziona come setter lo fa elem.style.something = value che è una cosa completamente diversa.

fonte

2011-12-22 16:11:23 Esailija

Come supportato da TFM: http://api.jquery.com/css/ ;-) – PPvG

Questa è stata la prima cosa che ho provato, ovviamente. Sfortunatamente sui browser WebKit restituisce la stringa "normale" a meno che non abbia impostato manualmente l'altezza della riga. Sto usando jQuery 1.6.1. Ha un comportamento diverso nelle versioni successive? –

@RadanGanchev sei corretto, restituisce normale per alcuni elementi. '[] .forEach.call (document.getElementsByTagName (" * "), function (v) { console.log (getComputedStyle (v) .lineHeight); });' Running che restituisce il valore px in questa pagina per la maggior parte elementi però. – Esailija

presupponendo che lo span sia contenuto in un div.

è possibile impostare il div a position: relative

e la durata come un blocco che prende altezza 100%.

In questo modo si allungherà la durata desiderata.

Esempio here (nota:.. Per vedere l'effetto, cambiare il colore del brano a sfondo trasparente Si dovrebbe essere in grado di vedere il div rosso)

fonte

2011-12-22 16:13:33 Rdpi

Sto usando un 'span', perché ho bisogno di un elemento in linea. Il mio obiettivo è contrassegnare del testo che potrebbe iniziare nel mezzo di una riga. 'display: block' non funziona per me. –

Se il progetto lo consente, è possibile applicare inline-block agli elementi che si rivolgono e quindi utilizzare outerHeight ...

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

fonte

2013-05-17 18:00:14

Un modo semplice per farlo è:

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

Questo otterrà il valore di calcolo dell'altezza della linea senza usare jQuery e funziona su tutti i browser da IE9 in poi.

fonte

2016-03-01 12:33:32 Ashh640

Come ottenere l'altezza della linea di una campata?

risposta

Problemi correlati