Properti clientWidth HTML DOM Element

Definisi dan Penggunaan

clientWidth Properti mengembalikan lebar tampilan elemen, termasuk jarak tebal, tetapi tidak termasuk garis border, scrollbar atau jarak luar, dalam piksel.

clientWidth Properti adalah hanya-baca.

Lihat Juga:Tutorial Model Bokong CSS

Lihat Juga:

Properti clientHeight

Properti clientTop

Properti clientLeft

Properti offsetHeight

Properti offsetWidth

Untuk menambahkan scrollbar ke elemen, gunakan Sifat overflow CSS。

Contoh

Contoh 1

Ambil tinggi dan lebar "myDIV", termasuk jarak tebal:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

Coba Sendiri

Contoh 2

Contoh 2: Perbedaan antara clientHeight/clientWidth dengan offsetHeight/offsetWidth

Tidak ada scrollbar:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Coba Sendiri

Adalah scrollbar:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Coba Sendiri

Sintaksis

element.clientWidth

Kembalian nilai

Tipe Deskripsi
Nilai Lebar tampilan elemen (dalam piksel), termasuk jarak tebal.

Pendukungan Pelayar

Semua pelayar mendukung element.clientWidth：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukung Dukung Dukung Dukung Dukung Dukung