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

Question

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

Suponiendo que la familia de la fuente y tamaño de fuente son los mismos, ambos deben emitir la misma line-height:

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

¿Cómo puedo obtener el line-height de un elemento con JavaScript?

Answer 1

La respuesta es en realidad el uso de .clientHeight. Como Gaby dijo, 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; 
} 

"clonar" las propiedades de su elemento en una nueva, obtener la nueva de clientHeight, suprima el elemento temporal, y volver su altura;

Answer 2

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

Answer 3

explicó en quirksmode: 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 4

Esta solución funciona para mí. Utiliza el valor de la propiedad 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; 
}