javascript - traduccion - line-width css

JavaScript: Encuentre la altura de línea de DIV, no la propiedad de CSS sino la altura de línea real

Question

Digamos que tengo un DIV: <div></div> y quiero averiguar con JS cuál es su altura de línea . Sé que se puede verificar el atributo de estilo style.lineHeight , pero quiero verificar la altura real de la línea , sin ella, dependiendo de la existencia de una regla CSS.

Suponiendo que la familia de fuentes y el tamaño de fuente son los mismos, ambos deberían mostrar la misma altura de línea :

<div>One line of text</div>
<div>Two <br /> Lines of text</div>

¿Cómo puedo obtener la altura de línea de un elemento con JavaScript?

Answer 1

Esta solución funciona para mí. Utiliza el valor de la propiedad de line-height cuando se ha establecido explícitamente o, cuando el valor no se ha establecido, calcula el valor al encontrar la diferencia en la altura del objeto cuando su contenido se aumenta en una línea.

function calculateLineHeight (element) {

  var lineHeight = parseInt(getStyle(element, ''line-height''), 10);
  var clone;
  var singleLineHeight;
  var doubleLineHeight;

  if (isNaN(lineHeight)) {
    clone = element.cloneNode();
    clone.innerHTML = ''<br>'';
    element.appendChild(clone);
    singleLineHeight = clone.offsetHeight;
    clone.innerHTML = ''<br><br>'';
    doubleLineHeight = clone.offsetHeight;
    element.removeChild(clone);
    lineHeight = doubleLineHeight - singleLineHeight;
  }

  return lineHeight;
}

Answer 2

Explicado en el modo peculiar: http://www.quirksmode.org/dom/getstyles.html

ejemplo: http://www.jsfiddle.net/gaby/UXNs2/

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

y usarlo como

getStyle(''test'', ''line-height'' )

Answer 3

La respuesta es usar .clientHeight . Como dijo Gaby , esto no es realmente confiable / confiable. ¡Sin embargo lo és! Aquí:

function getLineHeight(element){
   var temp = document.createElement(element.nodeName);
   temp.setAttribute("style","margin:0px;padding:0px;font-family:"+element.style.fontFamily+";font-size:"+element.style.fontSize);
   temp.innerHTML = "test";
   temp = element.parentNode.appendChild(temp);
   var ret = temp.clientHeight;
   temp.parentNode.removeChild(temp);
   return ret;
}

"Clona" las propiedades de tu elemento en una nueva, obtén el nuevo clientHeight de clientHeight , elimina el elemento temporal y devuelve su altura;

Answer 4

Ver currentStyle para IE y getComputedStyle() para otros navegadores (también compatibles con IE9 ).