HTML DOM offsetHeight Properti
Contoh
Dapatkan tinggi dan lebar elemen <div>, termasuk padding dan border:
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti offsetHeight mengembalikan ketinggian elemen yang dapat dilihat dalam piksel, termasuk padding, border, dan scrollbar, tetapi bukan margin.
Alasan mengapa kata "terlihat" ditentukan, karena jika konten elemen lebih tinggi dari tinggi sebenarnya dari elemen, properti ini hanya akan mengembalikan ketinggian yang terlihat (Lihat "Contoh Lainnya").
Catatan: Untuk memahami properti ini, Anda harus memahami Model Kotak CSS .
Tip: Properti ini sering digunakan bersama dengan properti offsetWidth .
Tips: Gunakan properti clientHeight dan clientWidth untuk mengembalikan tinggi dan lebar elemen yang dapat dilihat, hanya menyertakan padding.
Tip: Untuk menambahkan scrollbar ke elemen, gunakan properti CSS overflow .
Properti ini hanya-baca.
Dukungan Peramban
| Property | |||||
|---|---|---|---|---|---|
| offsetHeight | Yes | Yes | Yes | Yes | Yes |
Sintaksis
element.offsetHeight
Detail Teknis
| Nilai Kembali: | Angka, mewakili ketinggian elemen yang dapat dilihat dalam piksel, termasuk padding, border, dan scrollbar |
|---|
Lebih Banyak Contoh
Contoh
Contoh ini menunjukkan perbedaan antara clientHeight/clientWidth dan offsetHeight/offsetWidth:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Contoh
Contoh ini menunjukkan perbedaan antara clientHeight/clientWidth dan offsetHeight/offsetWidth, saat kita menambahkan scrollbar ke elemen:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";