JavaScript: Finde DIVs Zeilenhöhe, nicht CSS Eigenschaft sondern tatsächliche Zeilenhöhe

Question

Angenommen, ich habe einen DIV: <div></div> und möchte mit JS herausfinden, was Zeilenhöhe ist. Ich weiß, dass man das Stilattribut style.lineHeight überprüfen kann, aber ich möchte die tatsächlicheZeilenhöhe überprüfen, ohne es abhängig von der Existenz einer CSS-Regel.

Unter der Annahme, die Schriftfamilie und Schriftgröße gleich ist, soll beide Ausgang die gleiche line-height:

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

Wie kann ich den line-height ein Element mit JavaScript?

Answer 1

Die Antwort .clientHeight tatsächlich verwendet wird. Als Gaby sagte, das ist nicht wirklich zuverlässig/vertrauenswürdig. Wie auch immer es ist! Hier:

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; 
} 

„Clone“ die Eigenschaften Ihres Elements in eine neue, bekommen die neuen des clientHeight, das temporäre Element löschen, und das Rück es ist Höhe;

Answer 2

Siehe currentStyle für IE und getComputedStyle() für andere Browser (auch von IE9 unterstützt).

Answer 3

bei Quirksmode Erklärt: http://www.quirksmode.org/dom/getstyles.html

Beispiel: 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; 
} 

und verwenden Sie es wie

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

Answer 4

Diese Lösung funktioniert für mich. Es verwendet den Wert der Eigenschaft line-height, wenn es explizit festgelegt wurde, oder wenn der Wert nicht festgelegt wurde, berechnet es den Wert, indem es den Unterschied in der Höhe des Objekts ermittelt, wenn sein Inhalt um eine Zeile erweitert wird.

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; 
}