Properti clientWidth HTML DOM Element

Definisi dan Penggunaan

clientWidth Properti mengembalikan lebar tampilan elemen, termasuk marjin internal, tetapi tidak termasuk garis batas, scrollbar, atau marjin eksternal, dalam satuan piksel.

clientWidth Properti adalah hanya-baca.

Lihat juga：Tutorial Model Kisi CSS

Lihat juga：

Properti clientHeight

Properti clientTop

Properti clientLeft

Properti offsetHeight

Properti offsetWidth

Untuk menambahkan scrollbar ke elemen, gunakan Properti overflow CSS。

Contoh

Contoh 1

Ambil tinggi dan lebar "myDIV", termasuk marjin internal：

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 dan offsetHeight/offsetWidth

Tidak ada滚动条：

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

Ada滚动条：

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

Sintaks

element.clientWidth

Nilai Pengembalian

Tipe Deskripsi
Nilai Lebar tampilan elemen (dalam piksel), termasuk marjin internal.

Dukungan Peramban

Semua peramban mendukung element.clientWidth：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan Dukungan