tutorial pengembangan web terbaru
 

HTML DOM clientWidth 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 clientWidth mengembalikan lebar dapat dilihat dari unsur dalam pixel, termasuk padding, tetapi tidak perbatasan, scrollbar atau marjin.

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

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

Tip: Properti ini sering digunakan bersama-sama dengan clientHeight 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
clientWidth iya nih iya nih iya nih iya nih iya nih

Sintaksis

element .clientWidth

Rincian teknis

Kembali Nilai: Sebuah Nomor, mewakili lebar 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