tutorial pengembangan web terbaru
 

HTML DOM clientHeight Propery

<Elemen Object

Contoh

Dapatkan tinggi dan lebar dari <div> elemen, termasuk padding:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";

Hasil txt akan:

Height with padding: 270px
Width with padding: 420px
Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

Properti clientHeight mengembalikan ketinggian dapat dilihat dari unsur dalam pixel, termasuk padding, tetapi tidak perbatasan, scrollbar atau marjin.

Alasan mengapa "viewable" kata ditentukan, karena jika konten elemen adalah lebih tinggi dari tinggi sebenarnya dari elemen, properti ini hanya akan kembali tinggi yang terlihat (See "More Examples") .

Catatan: Untuk memahami properti ini, Anda harus memahami CSS Box Model .

Tip: Properti ini sering digunakan bersama-sama dengan clientWidth properti.

Tip: Gunakan offsetHeight dan offsetWidth properti untuk kembali tinggi dapat dilihat dan lebar elemen, termasuk padding, perbatasan dan scrollbar.

Tip: Untuk menambahkan scrollbar untuk elemen, gunakan CSS meluap properti.

Properti ini adalah read-only.

Dukungan Browser

Milik
clientHeight iya nih iya nih iya nih iya nih iya nih

Sintaksis

element .clientHeight

Rincian teknis

Kembali Nilai: Sebuah Nomor, mewakili ketinggian dapat dilihat dari unsur dalam pixel, termasuk bantalan
contoh

Contoh lebih

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

Hasil txt akan:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Cobalah sendiri "

Contoh

Contoh ini menunjukkan perbedaan antara clientHeight / clientWidth dan offsetHeight / offsetWidth, ketika kita menambahkan scrollbar untuk 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";

Hasil txt akan:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Cobalah sendiri "

<Elemen Object