Lebar klien Elemen DOM HTML
Objek ElemenContoh
Dapatkan tinggi dan lebar "myDIV", termasuk padding:
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
Lebih banyak contoh di bawah ini.
Definisi dan Penggunaan
Properti clientWidth
mengembalikan lebar elemen yang dapat dilihat dalam piksel, termasuk padding, tetapi bukan batas, bilah gulir, atau margin.
Properti clientWidth
ini hanya-baca.
tutorial:
Lihat juga:
The Element clientHeight Property
Untuk menambahkan scrollbar ke elemen, gunakan properti CSS overflow .
Sintaksis
element.clientWidth
Nilai Kembali
Jenis | Keterangan |
Nomor | Lebar elemen yang dapat dilihat (dalam piksel) termasuk padding. |
Perbedaan antara clientHeight/clientWidth dan offsetHeight/offsetWidth
Tanpa bilah gulir:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
Dengan bilah gulir:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
Dukungan Peramban
element.clientWidth
didukung di semua browser:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
Objek Elemen