Wie erhält man die Höhe eines DIV unter Berücksichtigung der Ränder des inneren Elements?

Question

Betrachten de folgende Markup:

<div id="outerElement"> 
    <div id="innerElement" style="border: 1px solid blue; background-color: #f0f3f5; margin-top: 100px"> 
     TESTE 
    </div> 
</div> 

ich die tatsächliche endgültige Höhe von outerElement mit Javascript erhalten möchten. Ich habe bemerkt, dass wenn ich die vertikalen Ränder von innerElement entferne, ich in der Lage bin zu bekommen, was ich will, aber ich kann Stile innerhalb des outerElement nicht ändern.

Wie mache ich das?

Obs: Ich habe bereits Höhe, scrollheight und OffsetHeight in allen Browsern versucht. Chrome gibt mir den erwarteten Wert (einschließlich der Ränder des inneren Elements) für scrollHeight. Alle anderen Browser schlagen fehl.

Answer 1

Versuchen Sie es mit clientHeight

var outerElement = document.getElementById("outerElement"); 
if(outerElement.clientHeight) { 
alert("Height is "+outerElement.clientHeight+"px"); 
} 
else { alert("Old browser?"); } 

Ich weiß, was du denkst ... "dies wird nicht funktionieren!" und ach, tut es nicht ... aber wenn Sie etwas tun, wie eine Grenze zu outerElement hinzufügen ... auch nur für einen Moment ...

var outerElement = document.getElementById("outerElement"); 
outerElement.style.border = "1px solid black"; 
var height = outerElement.clientHeight; 
outerElement.style.border = "none"; 
alert("Height is "+height+"px"); 

Nicht die schönste Lösung, aber es funktioniert, und wenn Sie können herausfinden, warum es funktioniert (ich todsicher nicht wissen: P) Sie können auf eine gute Lösung näher ...

Einige ältere Browser Sie können es allerdings nicht unterstützen ... würde ich hineinschauen müssen; Ich kann sie nicht auflisten.

Answer 2

Ich würde jQuery verwenden. Versuchen Sie mit

$("#myelementId").height() 

Und sehen, ob das es tut.

Answer 3

könnten Sie jQuery verwenden:

$('#outerElement').height(); // gets the height of the div 
$('#outerElement').outerHeight(); // gets the height of the div including margins and padding 
$('#outerElement').innerHeight(); // gets the height of the div including padding 

einer von denen, gebunden ist, zu arbeiten.

Answer 4

ok auch nicht schön, aber das ist, wie ich es tun (Disclaimer: Ich habe das von irgendwo einmal)

var height = elem.clientHeight + getBufferHeight(elem, true); 

function getBufferHeight(elem, includeMargins) { 
    if (!elem.visible()) { 
     return 0; 
    } 
    //do new Number instead of parseFloat to avoid rounding errors 
    var result = 0; 
    if (includeMargins) { 
     result = 
      new Number(elem.getStyle('marginTop').replace(/[^\d\.]/g, '')).ceil() + 
      new Number(elem.getStyle('marginBottom').replace(/[^\d\.]/g, '')).ceil(); 
    }  
    result += 
     new Number(elem.getStyle('borderBottomWidth').replace(/[^\d\.]/g, '')).ceil() + 
     new Number(elem.getStyle('borderTopWidth').replace(/[^\d\.]/g, '')).ceil() +  
     new Number(elem.getStyle('paddingTop').replace(/[^\d\.]/g, '')).ceil() + 
     new Number(elem.getStyle('paddingBottom').replace(/[^\d\.]/g, '')).ceil();       
    return result; 
} 

Answer 5

Dies ist eine schwierige Frage, was Sie als „angemessen“ Höhe erkennen. Die Höhe des Inhalts innerhalb einschließlich Grenzen, was ist Padding oder die tatsächliche Marge verwenden? Im Allgemeinen verhalten sich Browser ziemlich konsistent auf den meisten Dingen, aber quirksmode kann aufräumen, was Sie brauchen. (Als Hinweis, wenn Sie den tatsächlichen Rand gebraucht brauchen, wird es weh tun).

Answer 6

Ich denke, du solltest gehen alle Elemente Eigenschaften und die eine Summe nur auf diese Weise können Sie die genaue Höhe wissen ... aber im Fall der Höhe ist es zum Beispiel klar: beide Eigenschaft ich nicht denke ist möglich, die Höhe eines Elements zu kennen.

A 3 sec Gedanke könnte sein, so etwas wie:

var o document.getElementById ('id').Stil;

var total = ((o.height.split("px")[0] == "") ? 0 : o.height.split("px")[0]) + 
((o.marginTop.split("px")[0] == "") ? 0 : o.marginTop.split("px")[0]) + 
((o.marginBottom.split("px")[0] == "") ? 0 : o.marginBottom.split("px")[0]) + 
((o.paddingTop.split("px")[0] == "") ? 0 : o.paddingTop.split("px")[0]) + 
    ((o.borderTop.split("px")[0] == "") ? 0 : o.borderTop.split("px")[0]) + 
((o.borderBottom.split("px")[0] == "") ? 0 : o.borderBottom.split("px")[0]) 

Aber ich denke, man muss auch die document.getElementById include ('id'). Höhenwert, wenn es haben .... ist thougth kann aber helfen ..

besten =)

Answer 7

Diese Antwort kann ein wenig offensichtlich sein, aber wenn Sie den Rand bereits kennen, warum fügen Sie ihn nicht einfach manuell zur Höhe hinzu?

Answer 8

WARNUNG clientHeight fast funktioniert, aber nicht enthalten Margen :(

dachte, ich würde hinzufügen, dass ich das heute versucht, und während nahumsilva & plodder Recht es fast haben (nahumsilva-Version erscheint mehr Cross-Browser {plodder's scheint in Chrome/WebKit nicht zu funktionieren, aber ich bin kein Experte für diese Dinge}), sie haben beide übersehen, dass ein Element möglicherweise Stilelemente berechnet hat, die nicht von ihm definiert sind eigener Stil

Das hat mich verrückt gemacht - ich habe mich gefragt, wo meine <p> Elemente zusätzliche 16px Randhöhe bekommen - bis ich realisierte, dass es kommen würde aus dem berechneten Stil.

So lange Geschichte kurz, ein Ansatz, wie nahumsilva/plodder arbeitete für mich, mit der zusätzlichen Maßgabe, dass Sie sollten das Element des berechneten Stil mit window.getComputedStyle(element, null) erhalten, die eine CSSStyleDeclaration Objekt (wie element.style) zurückgibt. element.offsetHeight/element.clientHeight sollten Sie die Höhe geben, ohne Ränder, so dass das Ganze wie folgt aussieht:

var cstyle = window.getComputedStyle(element, null); 
var elementHeight = element.offsetHeight + 
Number(cstyle.marginBottom.replace(/[^\d\.]/g, '')) + 
Number(cstyle.marginTop.replace(/[^\d\.]/g, '')); 

Answer 9

hinzufügen clearfix, Verwendung jquery Höhe() und nehmen Sie wieder die clearfix Klasse.

Das wird funktionieren. :)

Answer 10

versuchen $("#myelementId").outerHeight(true)

Answer 11

Wenn Sie display : inline-block; die äußere div style einstellen scrollHeight gehören die Ränder der untergeordneten Elemente dann.

Es wird auch funktionieren, wenn Sie den Stil display : flex; (unterstützt von IE 9+)