Atribut offsetWidth Elemen DOM HTML

Definisi dan penggunaan

offsetWidth Atribut mengembalikan lebar elemen yang dapat dilihat (dalam piksel), termasuk padding, border, dan scrollbar, tetapi tidak termasuk margin.

offsetWidth Atribut adalah hanya baca.

Lihat pula:Panduan Model Bok CSS

offsetParent

Semua elemen blok melaporkan nilai offset yang bersangkutan kepada induk offset:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Induk offset adalah bapak yang paling dekat yang memiliki posisi yang bukan statis.

Jika tidak ada induk offset, nilai offset adalah relatif kepada teks utama dokumen.

Lihat pula:

Atribut offsetHeight

Atribut offsetParent

Atribut offsetTop

Atribut offsetLeft

Atribut clientTop

Atribut clientLeft

Atribut clientWidth

Atribut clientHeight

Contoh

Contoh 1

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

const elmnt = document.getElementById("myDIV");
let text = "Ketinggian 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 dengan 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

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

Pemungutan dukungan pelayar

Semua pelayar mendukung element.offsetWidth:

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