¿Cómo determinar una 'altura de línea' usando Javascript (jQuery)?

Question

Bueno, encontré la necesidad de una línea de altura para codificar un complemento, entonces, ¿puede dar un consejo, por favor? Gracias)

Answer 1

$('selector').css('line-height'); 

Answer 2

$('selector').css('line-height'); 

Devoluciones alto de línea como un valor decimal en píxeles, con la unidad, por ejemplo, "22.5px"

Se debe tener cuidado con esta solución, ya que los diferentes navegadores reportarán resultados diferentes. He descubierto que no puede usar medidas sin unidades con altura de línea (por ejemplo, 2.2) en su CSS, ya que IE6 informará un resultado incorrecto (por ejemplo, 2px en lugar de, por ejemplo, 36px). Así que recomiendo usar alturas de línea basadas en unidades con esta medida.

Answer 3

No puede estar seguro de obtener una altura de línea calculada en píxeles entre navegadores. A veces, el valor es "normal" o "heredar", que se calcula en Firefox, pero no en IE, por ejemplo. Una solución para esto (dependiendo, por supuesto, en su caso de uso) es conseguir el tamaño de fuente calculada (que puede ver), y se multiplica por 1,5, lo cual es bastante standard:

var fontSize = $(el).css('font-size'); 
var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5); 

Sí, es un poco asqueroso, pero funcionará perfectamente para cosas como determinar la altura correcta de un elemento en función de algunas líneas de texto, por ejemplo. Tenga en cuenta que puede/debe reemplazar 1.5 con cualquier relación estándar de altura de línea/tamaño de letra que ya esté utilizando en su sitio. Si no lo sabe, puede averiguar inspeccionando cualquier elemento de copia en Firebug y mirando el a) tamaño de letra calculado yb) el alto de línea. Luego, reemplace 1.5 con b/a. :-)

Espero que sea útil!

Answer 4

$('selector').css('line-height'); 

Si esto devuelve un número con px, puede usar el número. Si devuelve un% o un número sin unidades, puede multiplicarlo por el tamaño de fuente y usarlo. Si se vuelve normal, me las arreglé para trabajar con esto:

var height = $element.height(); 
var font_size = parseInt($element.css('font-size')); 
var num = Math.floor(height/font_size); 
for(; height % (height/num) != 0; --num) 
    ; 
return height/num; 

Esto sólo funciona con "normal", porque se puede asumir que la altura de la línea siempre será mayor que el tamaño de la fuente.

Se basa en la idea height % line_height == 0.
Técnicamente num == height/line_height que lo hace incognoscible. Afortunadamente, el piso de height/font_size es una buena heurística porque height/line_height son generalmente iguales o cercanos, y si está apagado, siempre se sobrepasa, nuevamente porque "normal" garantiza que la altura de la línea es mayor que el tamaño de fuente, por lo que puede probar e intenta de nuevo.

Answer 5

Obtenga y almacene texto, establezca texto temporalmente en una línea de valor (como "x" o "& nbsp"), obtenga y almacene .height (o .inner, o .outer, lo que necesite), reemplace el texto con valor almacenado. De ser necesario, muéstrala (por ejemplo, el elemento está oculto), luego vuelve a esconderla si es necesario.

Esta (.height) le dará la altura total de línea (tamaño de fuente más ajuste de altura de línea) en un número (como 15 para el tamaño de letra 12 y altura de línea 1.25).

Utilice un div oculto para hacer todo esto si es necesario, mostrar, obtener altura, ocultar.

Esta alerta indica el valor numeral 15, todos los navegadores:

<div id="TestDiv"> 
    Any text you want. 
</div> 

    jQuery(document).ready(function() 
{ 
    var TestText = $("#TestDiv").text(); 
    var TestDivLineHeight = $("#TestDiv") 
     .css("font-size", "12px").css("line-height", "1.25").text("x").height(); 
    alert(TestDivLineHeight); 
    $("#TestDiv").text(TestText); 
});