differenza tra offsetHeight e clientHeight

154

Nella dom javascript: qual è la differenza tra offsetHeight e clientHeight di un elemento?

javascript

— steve
fonte

Ecco un buon esempio demo jsfiddle.net/shibualexis/yVhgM/3

— GibboK

Risposte:

203

clientHeight :

Restituisce l'altezza dell'area visibile per un oggetto, in pixel. Il valore contiene l'altezza con il riempimento, ma non include la barra di scorrimento, il bordo e il margine.

offsetHeight :

Restituisce l'altezza dell'area visibile per un oggetto, in pixel. Il valore contiene l'altezza con il riempimento, la barra di scorrimento e il bordo, ma non include il margine.

Quindi, offsetHeightinclude barra di scorrimento e bordo, clientHeightno.

— Oded
fonte

Un'altra cosa che ho notato è che clientHeight è molto più veloce di offsetHeight. Hai idea del perché?

— disc0dancer

@ disc0dancer - Probabilmente perché il browser ha già i clientSizeprontamente disponibili (dopo tutto, è il viewport), ma deve essere calcolato offsetHeightdopo aver ridistribuito l'intero documento?

— Oded,

Bene, l'ispettore del webkit afferma che i reflow sono anche sull'intero documento, anche quando si richiede clientHeigh.

— disc0dancer

@ disc0dancer - Tanto per la mia ipotesi. Ma questa è una cosa di implementazione - non sono sicuro che tutti i browser siano così.

— Oded,

La risposta di Oded è la teoria. Ma la teoria e la realtà non sono sempre le stesse, almeno non per gli elementi <BODY> o <HTML> che possono essere importanti per le operazioni di scorrimento in javascript.

Microsoft ha una bella immagine in MSDN :

ClientHeight, OffsetHeight, ScrollHeight

Se hai una pagina HTML che mostra una barra di scorrimento verticale, ci si aspetterebbe che l'elemento <BODY> o <HTML> abbia un carattere ScrollHeight che OffsetHeight come mostra questa immagine. Questo vale per tutte le versioni precedenti di Internet Explorer.

Ma non è vero per Internet Explorer 11 e non per Firefox 36. Almeno in questi browser OffsetHeight è quasi lo stesso di ScrollHeight che è sbagliato.

E mentre OffsetHeight potrebbe essere sbagliato, ClientHeight è sempre corretto.

Prova il seguente codice su diversi browser e vedrai:

<!DOCTYPE html>
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
    document.write("Body off: " + document.body.offsetHeight 
             + "<br>Body cli: " + document.body.clientHeight
             + "<br>Html off: " + document.body.parentElement.offsetHeight               
             + "<br>Html cli: " + document.body.parentElement.clientHeight);
</script>
</body>
</html>

Mentre Internet Explorer meno recente mostra correttamente:

Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874

L'output di Firefox e Internet Explorer 11 è:

Body off: 1260
Body cli: 1260
Html off: 1276   // this is completely wrong
Html cli: 889

che mostra chiaramente che offsetHeight è sbagliato qui. OffsetHeight e ClientHeight dovrebbero differire solo di pochi pixel o essere uguali.

Si noti che ClientHeight e OffsetHeight possono anche differire notevolmente per gli elementi che non sono visibili come ad esempio una <FORM> in cui OffsetHeight può essere la dimensione reale del FORM mentre ClientHeight può essere zero.

— Elmue
fonte