Properti offsetWidth HTML DOM Element

Definisi dan penggunaan

offsetWidth Properti mengembalikan lebar tampilan elemen (dalam piksel), termasuk padding, border, dan scrollbar, tetapi tidak termasuk margin.

offsetWidth Properti hanya dapat diubah.

Silakan lihat:Panduan Model Kisi CSS

offsetParent

Semua elemen blok melaporkan nilai offset relatif terhadap orang tua offset:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Orang tua offset adalah bapak terdekat yang memiliki posisi yang bukan statis.

Jika tidak ada orang tua offset, nilai offset adalah relatif terhadap teks utama dokumen.

Silakan lihat:

Properti offsetHeight

Properti offsetParent

Properti offsetTop

Properti offsetLeft

Properti clientTop

Properti clientLeft

Properti clientWidth

Properti clientHeight

Contoh

Contoh 1

Dapatkan tinggi dan lebar "myDIV", termasuk padding dan border:

const elmnt = document.getElementById("myDIV");
let text = "Tinggi dengan padding dan border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Coba Sendiri

Contoh 2

Perbedaan antara clientHeight/clientWidth dan offsetHeight/offsetWidth

Tanpa scrollbar:

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

Coba Sendiri

Dengan scrollbar:

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

Coba Sendiri

Sintaks

element.offsetWidth

Nilai Kembalian

Tipe Deskripsi
Angka Lebar tampilan elemen (dalam piksel), termasuk margin internal, garis batas dan scrollbar.

Dukungan Peramban

Semua peramban mendukung element.offsetWidth:

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