it-swarm.com.de

Wie erhält man die gerenderte Höhe eines Elements?

Wie erhält man die gerenderte Höhe eines Elements?

Nehmen wir an, Sie haben ein <div>-Element mit etwas Inhalt darin. Dieser Inhalt wird die Höhe von <div> ausdehnen. Wie erhalten Sie die "gerenderte" Höhe, wenn Sie die Höhe nicht explizit festgelegt haben? Natürlich habe ich versucht: 

var h = document.getElementById('someDiv').style.height;

Gibt es einen Trick dafür? Ich verwende jQuery, wenn das hilft.

319
BuddyJoe

Es sollte einfach so sein

$('#someDiv').height();

mit jQuery. Dadurch wird die Höhe des ersten Elements im umhüllten Satz als Zahl abgerufen. 

Versuchen zu verwenden

.style.height

funktioniert nur, wenn Sie die Eigenschaft an erster Stelle gesetzt haben. Nicht sehr nützlich

158
Russ Cam

Versuchen Sie eine von:

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeight beinhaltet die Höhe und die vertikale Auffüllung.

offsetHeight beinhaltet die Höhe, die vertikale Auffüllung und die vertikalen Ränder.

scrollHeight umfasst die Höhe des enthaltenen Dokuments (wäre im Falle eines Bildlaufs größer als nur die Höhe), vertikales Auffüllen und vertikale Ränder.

1039
strager

NON JQUERY _ ​​da es eine Reihe von Links mit elem.style.height oben in den Antworten gab ...

INNERE HÖHE:
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

document.getElementById(id_attribute_value).clientHeight;

ÄUSSERE HÖHE:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

document.getElementById(id_attribute_value).offsetHeight; 

Oder eine meiner Lieblingsreferenzen: http://youmightnotneedjquery.com/

132
Jason Lydon

Sie können .outerHeight() für diesen Zweck verwenden.

Sie erhalten die volle gerenderte Höhe des Elements. Außerdem müssen Sie keinen css-height des Elements festlegen. Aus Sicherheitsgründen können Sie die Höhe auto beibehalten, damit sie nach der Höhe des Inhalts gerendert werden kann.

//if you need height of div excluding margin/padding/border
$('#someDiv').height();

//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();

// if you need height of div including padding and border
$('#someDiv').outerHeight();

//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);

Um einen Überblick über diese Funktionen zu erhalten, können Sie die jQuery-Site oder einen ausführlichen Beitrag in hier aufrufen.

der Unterschied wird zwischen .height()/innerHeight()/outerHeight()

43
open and free
style = window.getComputedStyle(your_element);

dann einfach: style.height

25
Feiteira

Ich benutze das:

document.getElementById('someDiv').getBoundingClientRect().height

Es funktioniert auch, wenn Sie das virtuelle DOM verwenden. Ich verwende es in Vue so:

this.$refs['some-ref'].getBoundingClientRect().height
15
Daantje

Definitiv verwenden 

$('#someDiv').height()   // to read it

oder

$('#someDiv').height(newHeight)  // to set it

Ich poste dies als zusätzliche Antwort, weil es ein paar wichtige Dinge gibt, die ich gerade gelernt habe.

Ich wäre gerade in die Falle geraten, offsetHeight zu verwenden. Das ist, was passiert ist :

  • Ich habe den guten alten Trick benutzt, einen Debugger zu verwenden, um zu "beobachten", welche Eigenschaften mein Element hat 
  • Ich habe gesehen, welcher Wert ungefähr den Wert hat, den ich erwartet hatte
  • Es war offsetHeight - also habe ich das verwendet. 
  • Dann wurde mir klar, dass es nicht mit einem versteckten DIV funktionierte
  • Ich habe versucht, mich zu verstecken, nachdem ich maxHeight berechnet hatte, aber das sah unbeholfen aus - geriet in ein Chaos.
  • Ich habe eine Suche gemacht - jQuery.height () entdeckt - und sie verwendet
  • herausgefunden, dass height () auch für verborgene Elemente funktioniert
  • nur zum Spaß habe ich die jQuery-Implementierung von height/width überprüft

Hier ist nur ein Teil davon:

Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
) 

Ja, es sieht BEIDE Scroll und Offset aus. Wenn dies fehlschlägt, sieht es noch weiter aus und berücksichtigt Probleme mit der Browser- und CSS-Kompatibilität. Mit anderen Worten: Ich interessiere mich nicht - oder möchte.

Aber ich muss nicht. Danke jQuery! 

Moral der Geschichte: Wenn jQuery eine Methode für etwas hat, dann wahrscheinlich aus gutem Grund, wahrscheinlich im Zusammenhang mit der Kompatibilität.

Wenn Sie die Liste der Methoden jQuery nicht gelesen haben vor kurzem schlage ich vor, dass Sie einen Blick darauf werfen.

14
Simon_Weaver

Ich habe einen einfachen Code erstellt, der nicht einmal JQuery benötigt und wahrscheinlich einigen Leuten helfen wird ..

function anyName(){
    var varname=document.getElementById('ID1').offsetHeight;
    document.getElementById('ID2').style.height=varname+'px';
}

Dann stellen Sie einfach den Körper ein, um ihn zu laden

<body onload='anyName()'>
11
Robuske

Hm, wir können die Elementgeometrie bekommen ...

var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);

Wie wäre es mit dieser einfachen JS?

7
Thomas Ludewig

Ist das die Antwort? 

"Wenn Sie etwas berechnen müssen, es jedoch nicht anzeigen, setzen Sie das Element auf visibility:hidden und position:absolute, fügen Sie es der DOM-Struktur hinzu, holen Sie die offsetHeight-Datei ab und entfernen Sie sie. . "

Ich habe das gleiche Problem bei einer Reihe von Elementen. Es gibt kein jQuery oder Prototyp, das auf der Website verwendet werden kann. Ich bin jedoch dafür, die Technik auszuleihen, wenn sie funktioniert. Als Beispiel für einige Dinge, die nicht funktionierten, folgte dem folgenden Code:

// Layout Height Get
function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault)
{
    var DoOffset = true;
    if (!elementPassed) { return 0; }
    if (!elementPassed.style) { return 0; }
    var thisHeight = 0;
    var heightBase = parseInt(elementPassed.style.height);
    var heightOffset = parseInt(elementPassed.offsetHeight);
    var heightScroll = parseInt(elementPassed.scrollHeight);
    var heightClient = parseInt(elementPassed.clientHeight);
    var heightNode = 0;
    var heightRects = 0;
    //
    if (DoBase) {
        if (heightBase > thisHeight) { thisHeight = heightBase; }
    }
    if (DoOffset) {
        if (heightOffset > thisHeight) { thisHeight = heightOffset; }
    }
    if (DoScroll) {
        if (heightScroll > thisHeight) { thisHeight = heightScroll; }
    }
    //
    if (thisHeight == 0) { thisHeight = heightClient; }
    //
    if (thisHeight == 0) { 
        // Dom Add:
        // all else failed so use the protype approach...
        var elBodyTempContainer = document.getElementById('BodyTempContainer');
        elBodyTempContainer.appendChild(elementPassed);
        heightNode = elBodyTempContainer.childNodes[0].offsetHeight;
        elBodyTempContainer.removeChild(elementPassed);
        if (heightNode > thisHeight) { thisHeight = heightNode; }
        //
        // Bounding Rect:
        // Or this approach...
        var clientRects = elementPassed.getClientRects();
        heightRects = clientRects.height;
        if (heightRects > thisHeight) { thisHeight = heightRects; }
    }
    //
    // Default height not appropriate here
    // if (thisHeight == 0) { thisHeight = elementHeightDefault; }
    if (thisHeight > 3000) {
        // ERROR
        thisHeight = 3000;
    }
    return thisHeight;
}

was im Grunde alles versucht, nur um ein Null-Ergebnis zu erhalten. ClientHeight ohne Auswirkungen. Bei den Problemelementen bekomme ich normalerweise NaN in der Basis und Null in den Versatz- und Bildlaufhöhen. Ich habe dann die Add DOM-Lösung und clientRects ausprobiert, um zu sehen, ob es hier funktioniert.

29 Jun 2011, Ich habe den Code tatsächlich aktualisiert, um das Hinzufügen von DOM und clientHeight mit besseren Ergebnissen zu versuchen, als ich erwartet hatte. 

1) clientHeight war ebenfalls 0.

2) Dom gab mir tatsächlich eine Höhe, die großartig war.

3) ClientRects liefert ein Ergebnis, das mit der DOM-Technik nahezu identisch ist.

Da die hinzugefügten Elemente fließend sind, werden sie, wenn sie einem ansonsten leeren DOM-Temp-Element hinzugefügt werden, entsprechend der Breite dieses Containers gerendert. Dies wird seltsam, weil das 30px kürzer ist, als es letztendlich endet.

Ich habe ein paar Schnappschüsse hinzugefügt, um zu veranschaulichen, wie die Höhe anders berechnet wird.Menu block rendered normallyMenu block added to DOM Temp element

Die Höhenunterschiede liegen auf der Hand. Ich könnte sicherlich absolute Positionierung hinzufügen und verstecken, aber ich bin mir sicher, dass dies keine Auswirkungen haben wird. Ich war weiterhin davon überzeugt, dass dies nicht funktionieren würde!

(Ich schweife weiter ab) Die Höhe ist niedriger als die tatsächliche gerenderte Höhe. Dies könnte durch Einstellen der Breite des DOM-Temp-Elements an das vorhandene übergeordnete Element angegangen werden und könnte theoretisch ziemlich genau erfolgen. Ich weiß auch nicht, was daraus resultieren würde, wenn man sie entfernt und an ihrem vorhandenen Standort wieder hinzufügt. Da sie durch eine innerHTML-Technik ankamen, werde ich mit diesem anderen Ansatz nachdenken.

* HOWEVER * Nichts davon war notwendig. In der Tat funktionierte es wie angekündigt und gab die richtige Höhe zurück !!!

Als ich die Menüs erstaunlich gut sichtbar machen konnte, hatte DOM die korrekte Höhe für das flüssige Layout oben auf der Seite (279px) zurückgegeben. Der obige Code verwendet auch getClientRects, das 280px zurückgibt.

Dies wird in der folgenden Momentaufnahme veranschaulicht (bei laufender Arbeit von Chrome übernommen.)
enter image description here

Nun habe ich keine Ahnung, warum der Prototyp-Trick funktioniert, aber es scheint so. Alternativ funktioniert getClientRects auch.

Ich vermute, der Grund für all diese Probleme mit diesen speziellen Elementen war die Verwendung von innerHTML anstelle von appendChild, aber das ist an diesem Punkt reine Spekulation.

7
DHorse

offsetHeight normalerweise.

Wenn Sie etwas berechnen müssen, es jedoch nicht anzeigen, setzen Sie das Element auf visibility:hidden und position:absolute, fügen Sie es der DOM-Struktur hinzu, rufen Sie die offsetHeight ab und entfernen Sie es. (Das ist, was die Prototypbibliothek beim letzten Check hinter den Kulissen macht).

5
user58777

Manchmal gibt offsetHeight Null zurück, da das von Ihnen erstellte Element noch nicht im Dom gerendert wurde. Ich habe diese Funktion für solche Umstände geschrieben:

function getHeight(element)
{
    var e = element.cloneNode(true);
    e.style.visibility = "hidden";
    document.body.appendChild(e);
    var height = e.offsetHeight + 0;
    document.body.removeChild(e);
    e.style.visibility = "visible";
    return height;
}
4
Lonnie Best

Wenn Sie jQuery bereits verwenden, ist Ihre beste Wette .outerHeight() oder .height(), wie bereits erwähnt.

Ohne jQuery können Sie die verwendete Boxgröße überprüfen und verschiedene Auffüllungen + Rahmen + clientHeight, oder verwenden, um getComputedStyle zu verwenden:

var h = getComputedStyle (document.getElementById ('someDiv')). height;

h ist jetzt eine Zeichenfolge wie "53.825px".

Und ich kann die Referenz nicht finden, aber ich habe gehört, dass getComputedStyle() teuer sein kann. Daher ist es wahrscheinlich nicht etwas, das Sie für jedes window.onscroll-Ereignis aufrufen möchten (aber height() von jQuery ist es auch nicht).

3
chbrown

Mit MooTools:

$ ('someDiv'). getSize (). y

1
kwcto

Wenn ich deine Frage richtig verstanden habe, dann würde vielleicht so etwas helfen:

function testDistance(node1, node2) {
    /* get top position of node 1 */
    let n1Pos = node1.offsetTop;
    /* get height of node 1 */
    let n1Height = node1.clientHeight;
    /* get top position of node 2 */
    let n2Pos = node2.offsetTop;
    /* get height of node 2 */
    let n2Height = node2.clientHeight;

    /* add height of both nodes */
    let heightTogether = n1Height + n2Height;
    /* calculate distance from top of node 1 to bottom of node 2 */
    let actualDistance = (n2Pos + n2Height) - n1Pos;

    /* if the distance between top of node 1 and bottom of node 2
       is bigger than their heights combined, than there is something between them */
    if (actualDistance > heightTogether) {
        /* do something here if they are not together */
        console.log('they are not together');
    } else {
        /* do something here if they are together */
        console.log('together');
    } 
}
0
LuisBento
document.querySelector('.project_list_div').offsetWidth;
0
Ritwik