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

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

Angenommen, Sie haben ein <div>Element mit Inhalten. Dieser Inhalt im Inneren wird die Höhe des <div>. Wie erhalten Sie die "gerenderte" Höhe, wenn Sie die Höhe nicht explizit festgelegt haben? Offensichtlich habe ich versucht:

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

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

Es sollte einfach so sein

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

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

Ich versuche zu benutzen

.style.height

funktioniert nur, wenn Sie die Eigenschaft zuerst festgelegt haben. Nicht sehr nützlich!

Versuchen Sie eines 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 vertikale Polsterung.

offsetHeight Enthält die Höhe, die vertikale Polsterung und die vertikalen Ränder.

scrollHeight Enthält die Höhe des enthaltenen Dokuments (wäre beim Scrollen größer als nur die Höhe), den vertikalen Abstand und die vertikalen Ränder.

NON JQUERY, da elem.style.heightoben in diesen Antworten eine Reihe von Links verwendet wurden ...

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

document.getElementById(id_attribute_value).clientHeight;

AUSSENHÖ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/

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

Sie erhalten die volle gerenderte Höhe des Elements. Außerdem müssen Sie kein css-heightElement festlegen . Vorsichtshalber können Sie die Höhe automatisch beibehalten, damit sie gemäß 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 klaren Überblick über diese Funktionen zu erhalten, können Sie hier die Website von jQuery oder einen ausführlichen Beitrag aufrufen .

es wird den Unterschied zwischen .height()/ innerHeight()/outerHeight()

Ich benutze dies, um die Höhe eines Elements zu erhalten (gibt float zurück) :

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

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

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

style = window.getComputedStyle(your_element);

dann einfach: style.height

Auf jeden Fall 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 bin gerade fast 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 um den erwarteten Wert liegt
• Es war offsetHeight - also habe ich das benutzt.
• Dann wurde mir klar, dass es mit einem versteckten DIV nicht funktionierte
• Ich habe versucht, mich zu verstecken, nachdem ich maxHeight berechnet hatte, aber das sah ungeschickt aus - ich war durcheinander.
• Ich habe eine Suche durchgeführt - jQuery.height () entdeckt - und verwendet
• herausgefunden, dass height () auch bei versteckten Elementen 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 Bildlauf und Versatz. Wenn dies fehlschlägt, sieht es unter Berücksichtigung von Browser- und CSS-Kompatibilitätsproblemen noch weiter aus. Mit anderen Worten, ich kümmere mich nicht darum - oder möchte es.

Aber ich muss nicht. Danke jQuery!

Moral der Geschichte: Wenn jQuery eine Methode für etwas hat, hat dies wahrscheinlich einen guten Grund, der wahrscheinlich mit der Kompatibilität zusammenhängt.

Wenn Sie die jQuery-Liste der Methoden in letzter Zeit nicht gelesen haben, empfehlen wir Ihnen, einen Blick darauf zu werfen.

document.querySelector('.project_list_div').offsetHeight;

Ich habe einen einfachen Code erstellt, der nicht einmal JQuery benötigt und wahrscheinlich einigen Leuten helfen wird. Nach dem Laden wird die Gesamthöhe von 'ID1' ermittelt und für 'ID2' verwendet.

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

Stellen Sie dann einfach den Körper so ein, dass er geladen wird

<body onload='anyName()'>

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 diesem einfachen JS?

Ich denke, der beste Weg, dies im Jahr 2020 zu tun, ist die Verwendung von einfachen js und getBoundingClientRect().height;

Hier ist ein Beispiel

let div = document.querySelector('div');
let divHeight = div.getBoundingClientRect().height;

console.log(`Div Height: ${divHeight}`);

<div>
  How high am I? 🥴
</div>

Hinzu kommt immer auf heightdiese Weise haben wir auch Zugriff auf ein paar andere Sachen über die div.

let div = document.querySelector('div');
let divInfo = div.getBoundingClientRect();

console.log(divInfo);

<div>What else am I? 🥴</div>

Also ist das die Antwort?

"Wenn Sie etwas berechnen müssen, es aber nicht anzeigen müssen , setzen Sie das Element auf visibility:hiddenund position:absolute, fügen Sie es dem DOM-Baum hinzu, rufen Sie die offsetHeight ab und entfernen Sie es.

Ich habe das gleiche Problem bei einer Reihe von Elementen. Es gibt keine jQuery oder Prototype, die auf der Site verwendet werden können, aber ich bin alle dafür, die Technik auszuleihen, wenn sie funktioniert. Als Beispiel für einige Dinge, die nicht funktionierten, gefolgt von dem, was getan hat, habe ich den 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;
}

Das versucht im Grunde alles und jedes, nur um ein Null-Ergebnis zu erhalten. ClientHeight ohne Auswirkungen. Mit den Problemelementen erhalte 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.

Am 29. Juni 2011 habe ich den Code tatsächlich aktualisiert, um zu versuchen, sowohl DOM als auch clientHeight mit besseren Ergebnissen als erwartet hinzuzufügen.

1) clientHeight war ebenfalls 0.

2) Dom hat mir tatsächlich eine Größe gegeben, die großartig war.

3) ClientRects gibt ein Ergebnis zurück, das fast identisch mit der DOM-Technik ist.

Da die hinzugefügten Elemente flüssiger Natur sind, werden sie beim Hinzufügen zu einem ansonsten leeren DOM Temp-Element entsprechend der Breite dieses Containers gerendert. Das wird komisch, 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 unterschiedlich berechnet wird.

Die Höhenunterschiede sind offensichtlich. Ich könnte sicherlich absolute Positionierung und versteckt hinzufügen, aber ich bin sicher, dass das keine Wirkung 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ächlich gerenderte Höhe. Dies könnte durch Einstellen der Breite des DOM Temp-Elements auf das vorhandene übergeordnete Element behoben werden und könnte theoretisch ziemlich genau erfolgen. Ich weiß auch nicht, was sich daraus ergeben würde, sie zu entfernen und wieder an ihrem vorhandenen Standort hinzuzufügen. Da sie durch eine innerHTML-Technik angekommen sind, werde ich diesen anderen Ansatz verwenden.

* JEDOCH * Nichts davon war notwendig. Tatsächlich funktionierte es wie angegeben und gab die richtige Höhe zurück !!!

Als ich in der Lage war, die Menüs wieder sichtbar zu machen, hatte DOM erstaunlicherweise die richtige Höhe gemäß dem Fluid-Layout oben auf der Seite (279 Pixel) zurückgegeben. Der obige Code verwendet auch getClientRects, die 280px zurückgeben.

Dies wird im folgenden Schnappschuss veranschaulicht (aus Chrome entnommen, sobald es funktioniert hat).

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

Ich vermute, die Ursache für all diese Probleme mit diesen bestimmten Elementen war die Verwendung von innerHTML anstelle von appendChild, aber das ist an dieser Stelle reine Spekulation.

offsetHeight, gewöhnlich.

Wenn Sie etwas berechnen, aber nicht anzeigen müssen, setzen Sie das Element auf visibility:hiddenund position:absolute, fügen Sie es dem DOM-Baum hinzu , rufen Sie das ab offsetHeightund entfernen Sie es. (Das macht die Prototypenbibliothek hinter den Kulissen, als ich das letzte Mal nachgesehen habe).

Manchmal gibt offsetHeight Null zurück, weil 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;
}

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

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

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

h wird nun eine Zeichenfolge wie "53.825px" sein.

Und ich kann die Referenz nicht finden, aber ich denke, ich habe gehört getComputedStyle(), dass sie teuer sein kann. Daher möchten Sie sie wahrscheinlich nicht bei jedem window.onscrollEreignis anrufen (aber jQuery's auch nicht height()).

Mit MooTools :

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

Wenn ich Ihre Frage richtig verstanden hätte, 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');
    } 
}

Haben Sie die Höhe im CSS speziell eingestellt? Wenn Sie nicht haben, müssen Sie offsetHeight;eher als verwendenheight

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