Cum a face tu a lua prestate înălțime de un element?

Încercați una dintre:

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

`clientHeight include înălțime și verticală captuseala.

`offsetHeight include înălțime, verticale umplutură, și frontierele verticală.

`scrollHeight include înălțimea conținute de document (ar fi mai mare decât înălțimea în caz de defilare), verticale umplutură, și frontierele verticală.

Ar trebui să fie doar

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

cu jQuery. Aceasta preia o înălțime de primul element din înfășurat stabilit ca un număr.

Încercarea de a utiliza

.style.height

funcționează numai dacă ați setat proprietatea în primul rând. Nu foarte util!

NON JQUERY deoarece nu au fost o grămadă de link-uri folosind `elem.stil.înălțimea în partea de sus a acestor răspunsuri...

ÎNĂLȚIME INTERIOARĂ: https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

document.getElementById(id_attribute_value).clientHeight;

EXTERIOR INALTIME: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

document.getElementById(id_attribute_value).offsetHeight; 

Sau unul de meu favorit referințe: http://youmightnotneedjquery.com/

Puteți utiliza .outerHeight() pentru acest scop.

Acesta vă va oferi complet prestate înălțime a elementului. De asemenea, don't nevoie pentru a seta orice `css-înălțime a elementului. Pentru precauție puteți păstra înălțimea auto astfel încât acesta poate fi randat ca pe conținut's înălțime.

//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);

Pentru o vedere clară a acestor funcții, puteți merge pentru jQuery's site-ul sau un post detaliat aici.

se va șterge diferența între .inaltime() / innerHeight() / outerHeight()

Eu folosesc asta:

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

De asemenea, funcționează atunci când utilizați virtual DOM. Am folosit-o în Vue astfel:

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

style = window.getComputedStyle(your_element);

apoi, pur și simplu: "stil".inaltime`

Folosi cu siguranta

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

sau

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

Am'm a posta acest lucru ca un răspuns suplimentar pentru că sunt câteva lucruri importante am invatat.

Aproape că am căzut în capcana doar acum de ajutorul offsetHeight. Aceasta este ceea ce s-a întâmplat :

• Am folosit vechiul truc de a folosi un debugger la 'uit' ce proprietăți elementul meu a
• Am văzut care are o valoare în jurul valorii ma asteptam
• A fost offsetHeight - am folosit de asta.
• Apoi mi-am dat seama că nu au de lucru cu un DIV ascuns
• Am încercat să ascund după calcularea maxHeight, dar care părea stângace de - ajuns într-o mizerie.
• Am făcut o căutare descoperit jQuery.inaltime() - și a folosit-o
• aflat inaltime() funcționează chiar și pe elemente ascunse
• doar pentru distracție am verificat jQuery implementarea înălțime/lățime

Aici's doar o parte din ea :

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

Da se pare ATÂT la scroll si offset. Dacă aceasta nu reușește arată chiar mai departe, ținând cont de browser-ul și css probleme de compatibilitate. Cu alte cuvinte, LUCRURILE nu-mi mai PASĂ - sau doriți să.

Dar nu trebuie să. Multumesc jQuery!

Morala poveștii : dacă jQuery are o metodă pentru ceva, probabil, pentru un motiv bun, probabil legate de compatibilitate.

Dacă te-ai't citit prin jQuery lista de metode recent, îți sugerez să arunci o privire.

Am făcut un simplu cod care nu't chiar nevoie de JQuery și, probabil, o să ajut niște oameni. Devine înălțimea totală de 'ID1' după încărcate și de a folosi pe 'ID2'

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

Apoi setați corpul să-l încarce

Hm putem obține Elementul geometrie...

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

Ce zici de asta simplu JS ?

Deci acesta este raspunsul?

"Dacă aveți nevoie pentru a calcula ceva, dar nu-l arate, amplasat elementul să visibility:hidden " și " position:absolute, adăugați-l la copac DOM, pentru a primi offsetHeight, și scoateți-l. (Ca's ce prototipul biblioteca are în spatele liniilor ultima dată când am verificat)."

Am aceeasi problema pe un număr de elemente. Nu există nici jQuery sau Prototype pentru a fi utilizate pe site, dar am'm toate în favoarea împrumut tehnica daca functioneaza. Ca un exemplu de unele lucruri pe care nu a reușit să lucreze, urmată de ceea ce a făcut, am urmatorul cod:

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

care, practic, încearcă ceva și totul doar pentru a obține un rezultat zero. ClientHeight cu niciun efect. Cu problema elementele eu de obicei iau NaN în Baza și zero în Compensate și Scroll înălțimi. Am incercat apoi Add DOM soluție și clientRects pentru a vedea dacă acesta funcționează aici.

29 Jun 2011, Am făcut într-adevăr actualizați codul pentru a încerca atât adăugarea la DOM și clientHeight cu rezultate mai bune decât m-am așteptat.

1. clientHeight fost, de asemenea, 0.

2. Dom de fapt mi-a dat o înălțime, care a fost mare.

3. ClientRects returnează un rezultat aproape identic cu DOM tehnica.

Deoarece elementele adăugate sunt de lichid în natură, atunci când sunt adăugate la o altfel de gol DOM Temp element sunt prestate în funcție de lățimea de container. Acest lucru ciudat, pentru că este 30px mai scurte decât este în cele din urmă se termină.

Am adăugat câteva poze pentru a ilustra modul în care înălțimea este calculată în mod diferit.

Înălțimea diferențele sunt evidente. Am putea adăuga cu siguranță poziționarea absolută și ascunse, dar sunt sigur că nu va avea niciun efect. Am continuat să fie convins că acesta nu va funcționa!

(Am deviat de la subiect continuare) înălțimea iese (face) mai mic decât cel adevărat prestate înălțime. Acest lucru ar putea fi abordate prin stabilirea lățimea DOM Temp element pentru a se potrivi existente părinte și-ar putea face destul de exact în teorie. De asemenea, nu știu ce ar rezulta dintr-scoate-le și adăugându-le înapoi în locația existentă. Ca au ajuns printr-o innerHTML tehnica nu va fi în căutarea folosind acest abordare diferită.

Cu toate ACESTEA Nimic nu a fost necesar. În fapt, ea a lucrat ca publicitate și s-a întors la înălțimea corectă!!!

Când am fost în stare pentru a obține meniurile vizibile din nou uimitor DOM-au întors la înălțimea corectă pe aspect fluid în partea de sus a paginii (279px). Codul de mai sus utilizează, de asemenea, getClientRects care returnează 280px.

Acest lucru este ilustrat în următoarele instantaneu (luate de la Chrome dată de lucru.)

Acum am nuuuuuu idee de ce prototip truc funcționează, dar se pare că. Alternativ, getClientRects, de asemenea, funcționează.

Bănuiesc că de toate aceste probleme cu aceste elemente a fost utilizarea de innerHTML în loc de appendChild, dar asta este o pură speculație la acest punct.

offsetHeight, de obicei.

Dacă aveți nevoie pentru a calcula ceva, dar nu-l arate, amplasat elementul să visibility:hidden " și " position:absolute, adăugați-l la copac DOM, ia offsetHeight, și scoateți-l. (Ca's ce prototipul biblioteca are în spatele scenei ultima dată când am verificat).

Uneori offsetHeight va reveni la zero, deoarece elementul de'am creat nu a fost pronunțată în Dom încă. Am scris această funcție pentru astfel de situații:

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

Dacă utilizați jQuery deja, cel mai bun pariu este de .outerHeight () "sau".inaltime(), după cum a fost menționat.

Fără jQuery, puteți verifica box-dimensionare în uz și se adaugă diverse garniture + borders + clientHeight, sau puteți utiliza getComputedStyle:

var h = getComputedStyle(document.getElementById('someDiv')).înălțime;

"h" va fi un șir de caractere ca un "53.825 px".

Și nu pot't găsi de referință, dar cred că am auzit getComputedStyle() poate fi costisitoare, asa ca's, probabil, ceva ce nu vrei să suni pe fiecare fereastra.onscrolleveniment (dar apoi, nici nu este jQuery'sînălțime()`).

Cu MooTools:

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

Dacă am înțeles întrebarea dumneavoastră în mod corect, atunci poate ceva de genul asta ar ajuta:

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

Au setați înălțimea în css în mod special? Dacă te-ai't trebuie să utilizați offsetHeight;, mai degrabă decât "înălțime"

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