¿Cómo obtener la altura de línea de un tramo?

¿Hay alguna forma de obtener el line-height de span (u otro elemento en línea) en JavaScript/jQuery?¿Cómo obtener la altura de línea de un tramo?

necesito el exacta calcula line-height en píxeles, no los valores de la clase 1.2em, normal o heurística como fontSize * 1.5.

Lo que tengo que hacer es estirar el fondo de un span para llenar toda la altura de la línea. Pensé que podría agregar almohadillas para estirar el tramo, pero para esto necesito el número exacto line-height. Si alguien puede ofrecer otro enfoque, esto también sería útil.

Fuente

2011-12-22 Radan Ganchev

Su span necesita tener display: bloquear, algo así como 'span {line-height: 12px; display: block;} ' –

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

Recupera el valor de px calculado como una cadena "16px", por ejemplo. Utiliza IE's currentStyle o el estándar getComputedStyle debajo de las cubiertas. Lo cual es algo sorprendente ya que cuando funciona como setter hace elem.style.something = value, que es una cosa completamente diferente.

Fuente

2011-12-22 16:11:23 Esailija

Según la copia de seguridad de TFM: http://api.jquery.com/css/ ;-) – PPvG

Esto fue lo primero que probé, por supuesto. Desafortunadamente en los navegadores WebKit devuelve la cadena "normal" a menos que haya configurado el 'line-height' manualmente de antemano. Estoy usando jQuery 1.6.1. ¿Tiene un comportamiento diferente en versiones posteriores? –

@RadanGanchev tiene la razón, vuelve normal para algunos elementos. '[] .forEach.call (document.getElementsByTagName (" * "), function (v) { console.log (getComputedStyle (v) .lineHeight); });' Ejecutando eso devuelve el valor de px en esta página para la mayoría elementos sin embargo. – Esailija

suponiendo que el tramo está contenido en un div.

podría configurar el div a position: relative

y el lapso como un bloque que se lleva a la altura del 100%.

De esta forma extenderá el tramo como lo desee.

Ejemplo here (nota:.. Para ver el efecto, cambiar el color de fondo de la extensión a transparente Usted debe ser capaz de ver el div rojo)

Fuente

2011-12-22 16:13:33 Rdpi

Estoy usando un 'span', porque necesito un elemento en línea. Mi objetivo es marcar un texto que puede comenzar en el medio de una línea. 'display: block' no funciona para mí. –

Si el diseño lo permite, se puede aplicar inline-block a los elementos que se dirigen y luego usar outerHeight ...

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

Fuente

2013-05-17 18:00:14

Una manera fácil de hacer esto es:

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

Esto obtendrá el valor de cálculo de la altura de la línea sin usar jQuery y funciona en todos los navegadores desde IE9 en adelante.

Fuente

2016-03-01 12:33:32 Ashh640

¿Cómo obtener la altura de línea de un tramo?

Respuesta

Cuestiones relacionadas