perbedaan antara offsetHeight dan clientHeight

154

Dalam dom javascript - apa perbedaan antara elemen offsetHeight dan clientHeight?

javascript

— steve
sumber

Berikut contoh demo yang bagus jsfiddle.net/shibualexis/yVhgM/3

— GibboK

Jawaban:

203

clientHeight :

Mengembalikan ketinggian area yang terlihat untuk objek, dalam piksel. Nilai berisi ketinggian dengan padding, tetapi tidak termasuk scrollBar, border, dan margin.

offsetHeight :

Mengembalikan ketinggian area yang terlihat untuk objek, dalam piksel. Nilai berisi ketinggian dengan padding, scrollBar, dan perbatasan, tetapi tidak termasuk margin.

Jadi, offsetHeighttermasuk scrollbar dan border, clientHeighttidak.

— Oded
sumber

Hal lain yang saya perhatikan adalah clientHeight jauh lebih cepat daripada offsetHeight. Apakah Anda tahu mengapa?

— disc0dancer

@ disc0dancer - Mungkin karena browser sudah memiliki yang clientSizetersedia (setelah semua, itu viewport), tetapi perlu menghitung offsetHeightsetelah merefleksikan seluruh dokumen?

— Oded

Nah, inspektur webkit mengatakan bahwa reflow juga ada di seluruh dokumen, bahkan ketika meminta klien.

— disc0dancer

@ disc0dancer - Begitu banyak dugaan saya. Tapi ini adalah hal implementasi - tidak yakin semua browser seperti itu.

— Oded

Jawaban dari Oded adalah teorinya. Tetapi teori dan kenyataan tidak selalu sama, setidaknya tidak untuk elemen <BODY> atau <HTML> yang mungkin penting untuk operasi pengguliran dalam javascript.

Microsoft memiliki gambar yang bagus di MSDN :

ClientHeight, OffsetHeight, ScrollHeight

Jika Anda memiliki halaman HTML yang memperlihatkan bilah gulir vertikal, orang akan mengharapkan bahwa elemen <BODY> atau <HTML> memiliki geater ScrollHeight daripada OffsetHeight seperti yang ditunjukkan gambar ini. Ini berlaku untuk semua versi Internet Explorer yang lebih lama.

Tapi itu tidak benar untuk Internet Explorer 11 dan tidak untuk Firefox 36. Setidaknya di browser ini OffsetHeight hampir sama dengan ScrollHeight yang salah.

Dan meskipun OffsetHeight mungkin salah, ClientHeight selalu benar.

Coba kode berikut di berbagai browser dan Anda akan melihat:

<!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>

Sementara Internet Explorer yang lebih lama tampil dengan benar:

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

Output dari Firefox dan Internet Explorer 11 adalah:

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

yang menunjukkan dengan jelas bahwa offsetHeight salah di sini. OffsetHeight dan ClientHeight harus berbeda hanya beberapa piksel atau sama.

Harap perhatikan bahwa ClientHeight dan OffsetHeight mungkin juga sangat berbeda untuk elemen yang tidak terlihat seperti misalnya <FORM> di mana OffsetHeight mungkin ukuran sebenarnya dari FORMULIR sementara ClientHeight mungkin nol.

— Elmue
sumber