Come si ottiene l’altezza di rendering di un elemento?

Come si ottiene l’altezza di rendering di un elemento?

Supponiamo che tu abbia un elemento

con un contenuto all’interno. Questo contenuto al suo interno sta per allungare l’altezza del

. Come ottieni l’altezza “renderizzata” quando non hai impostato esplicitamente l’altezza. Ovviamente, ho provato:

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

C’è un trucco per farlo? Sto usando jQuery se questo aiuta.

    Dovrebbe essere solo

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

    con jQuery. Ciò recupera l’altezza del primo elemento nel set avvolto come un numero.

    Cercando di usare

     .style.height 

    funziona solo se hai impostato la proprietà in primo luogo. Non molto utile!

    Prova uno di:

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

    clientHeight include l’altezza e il riempimento verticale.

    offsetHeight include l’altezza, il riempimento verticale e i bordi verticali.

    scrollHeight include l’altezza del documento contenuto (sarebbe maggiore della sola altezza in caso di scorrimento), riempimento verticale e bordi verticali.

    NON JQUERY dato che c’erano un sacco di link usando elem.style.height nella parte superiore di queste risposte …

    ALTEZZA INTERNA:
    https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

     document.getElementById(id_attribute_value).clientHeight; 

    ALTEZZA ESTERNA:
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

     document.getElementById(id_attribute_value).offsetHeight; 

    O uno dei miei riferimenti preferiti: http://youmightnotneedjquery.com/

    È ansible utilizzare .outerHeight() per questo scopo.

    Ti darà l’altezza di rendering completa dell’elemento. Inoltre, non è necessario impostare alcun css-height dell’elemento. Per precauzione puoi mantenere la sua altezza automatica in modo che possa essere resa all’altezza del contenuto.

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

    Per una chiara visione di queste funzioni puoi visitare il sito di jQuery o un post dettagliato qui .

    cancellerà la differenza tra .height() / innerHeight() / outerHeight()

     style = window.getComputedStyle(your_element); 

    quindi semplicemente: style.height

    Sicuramente usa

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

    o

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

    Sto postando questo come una risposta aggiuntiva perché ci sono un paio di cose importanti che ho appena imparato.

    Sono quasi caduto nella trappola proprio ora di usare offsetHeight. Questo è quello che è successo :

    • Ho usato il buon vecchio trucco di usare un debugger per ‘vedere’ quali proprietà ha il mio elemento
    • Ho visto quale ha un valore attorno al valore che mi aspettavo
    • Era offsetHeight – quindi l’ho usato.
    • Poi ho capito che non funzionava con un DIV nascosto
    • Ho provato a nascondermi dopo aver calcolato MaxHeight ma sembrava goffo – ho avuto un casino.
    • Ho fatto una ricerca – ha scoperto jQuery.height () – e l’ho usata
    • trovato height () funziona anche su elementi nascosti
    • solo per divertimento ho controllato l’implementazione jQuery di altezza / larghezza

    Ecco solo una parte di esso:

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

    Si guarda a BOTH scroll e offset. Se fallisce sembra ancora più lontano, tenendo conto dei problemi di compatibilità con browser e CSS. In altre parole STUFF I DONT CARE – o volere.

    Ma non devo. Grazie a jQuery!

    Morale della trama: se jQuery ha un metodo per qualcosa, probabilmente è per una buona ragione, probabilmente correlato alla compatibilità.

    Se non hai letto l’ elenco dei metodi di jQuery di recente ti suggerisco di dare un’occhiata.

    Ho creato un codice semplice che non ha nemmeno bisogno di JQuery e probabilmente aiuterà alcune persone. Ottiene l’altezza totale di ‘ID1’ dopo il caricamento e lo usa su ‘ID2’

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

    Quindi imposta il corpo per caricarlo

      

    Quindi questa è la risposta?

    “Se devi calcolare qualcosa ma non mostrarlo, imposta l’elemento alla visibility:hidden e position:absolute , aggiungilo all’albero DOM, ottieni l’offsetHeight e rimuovilo. (Questo è ciò che la libreria prototipo fa dietro le righe volta che ho controllato). ”

    Ho lo stesso problema su un numero di elementi. Non ci sono jQuery o Prototype da utilizzare sul sito, ma sono tutti a favore di prendere in prestito la tecnica se funziona. Come esempio di alcune cose che non hanno funzionato, seguito da cosa ha fatto, ho il seguente codice:

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

    che fondamentalmente prova tutto e tutto solo per ottenere un risultato pari a zero. ClientHeight senza effetto. Con gli elementi problematici generalmente ottengo NaN nella Base e zero nelle altezze Offset e Scorrimento. Ho quindi provato la soluzione Add DOM e clientRects per vedere se funziona qui.

    29 giugno 2011, ho effettivamente aggiornato il codice per provare ad aggiungere sia a DOM che a clientHeight con risultati migliori di quanto mi aspettassi.

    1) clientHeight era anche 0.

    2) Dom in realtà mi ha dato un’altezza che è stata grande.

    3) ClientRects restituisce un risultato quasi identico alla tecnica DOM.

    Poiché gli elementi aggiunti sono di natura fluida, quando vengono aggiunti a un elemento DOM Temp altrimenti vuoto vengono renderizzati in base alla larghezza del contenitore. Questo è strano, perché è 30px più breve di quello che alla fine finisce.

    Ho aggiunto alcune istantanee per illustrare come l’altezza viene calcasting in modo diverso. Il blocco del menu è visualizzato normalmenteBlocco di menu aggiunto all'elemento DOM Temp

    Le differenze di altezza sono ovvie. Potrei certamente aggiungere posizionamenti assoluti e nascosti ma sono sicuro che non avrà alcun effetto. Ho continuato ad essere convinto che questo non avrebbe funzionato!

    (Sto divagando ulteriormente) L’altezza esce (rende) inferiore alla vera altezza di rendering. Questo potrebbe essere risolto impostando la larghezza dell’elemento DOM Temp in modo che corrisponda al genitore esistente e potrebbe essere fatto in modo abbastanza accurato in teoria. Inoltre, non so cosa deriverebbe dalla loro rimozione e dalla loro aggiunta nella posizione esistente. Quando sono arrivati ​​attraverso una tecnica innerHTML, cercherò di utilizzare questo approccio diverso.

    * TUTTAVIA * Nulla di ciò era necessario. In effetti ha funzionato come pubblicizzato e ha restituito l’altezza corretta !!!

    Quando sono stato in grado di visualizzare nuovamente i menu di nuovo in modo sorprendente, DOM ha restituito l’altezza corretta per il layout fluido nella parte superiore della pagina (279 pixel). Il codice sopra riportato utilizza anche getClientRects che restituisce 280px.

    Questo è illustrato nella seguente immagine (presa da Chrome una volta funzionante).
    inserisci la descrizione dell'immagine qui

    Ora non ho idea del perché questo trucco prototipo funzioni, ma sembra. In alternativa, getClientRects funziona anche.

    Sospetto che la causa di tutti questi problemi con questi particolari elementi sia stata l’uso di innerHTML invece di appendChild, ma questa è pura speculazione a questo punto.

    offsetHeight , di solito.

    Se devi calcolare qualcosa ma non mostrarlo, imposta l’elemento sulla visibility:hidden e position:absolute , aggiungilo all’albero DOM, ottieni l’ offsetHeight e rimuovilo. (Questo è ciò che la libreria prototipo fa dietro le quinte l’ultima volta che ho controllato).

    Hm possiamo ottenere la geometria Element …

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

    Che ne dici di questo semplice JS?

    A volte offsetHeight restituirà zero perché l’elemento che hai creato non è ancora stato reso nel Dom. Ho scritto questa funzione per tali circostanze:

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

    Se stai già utilizzando jQuery, la tua scommessa migliore è .outerHeight() o .height() , come è stato affermato.

    Senza jQuery, puoi controllare il dimensionamento della scatola in uso e aggiungere vari paddings + bordi + clientHeight, oppure puoi usare getComputedStyle :

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

    h sarà ora una stringa simile a “53.825px”.

    E non riesco a trovare il riferimento, ma penso che ho sentito getComputedStyle() può essere costoso, quindi probabilmente non è qualcosa che si desidera chiamare su ogni evento window.onscroll (ma poi, nemmeno l’ height() di jQuery height() ).

    Con MooTools:

    $ ( ‘SomeDiv’). GetSize (). Y

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

    Hai impostato l’altezza nel css in modo specifico? Se non hai bisogno di usare offsetHeight; piuttosto che height

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