tutorial pengembangan web terbaru
 

HTML DOM offsetWidth Propery

<Elemen Object

Contoh

Dapatkan tinggi dan lebar dari <div> elemen, termasuk padding dan border:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

Hasil txt akan:

Height with padding and border: 280px
Width with padding and border: 430px
Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

Properti offsetWidth mengembalikan lebar dapat dilihat dari unsur dalam pixel, termasuk padding, perbatasan dan scrollbar, tapi tidak margin.

Alasan mengapa "viewable" kata ditentukan, karena jika konten elemen lebih lebar dari lebar yang sebenarnya dari elemen, properti ini hanya akan kembali lebar yang terlihat (See "More Examples") .

Catatan: Untuk memahami properti ini, Anda harus memahami CSS Box Model .

Tip: Properti ini sering digunakan bersama-sama dengan offsetHeight properti.

Tip: Gunakan clientHeight dan clientWidth properti untuk kembali tinggi dapat dilihat dan lebar elemen, hanya termasuk padding.

Tip: Untuk menambahkan scrollbar untuk elemen, gunakan CSS meluap properti.

Properti ini adalah read-only.

Dukungan Browser

Milik
offsetWidth iya nih iya nih iya nih iya nih iya nih

Sintaksis

element .offsetWidth

Rincian teknis

Kembali Nilai: Sebuah Nomor, mewakili lebar dapat dilihat dari unsur dalam pixel, termasuk padding, perbatasan dan scrollbar
contoh

Contoh lebih

Contoh

Contoh ini menunjukkan perbedaan antara clientHeight / clientWidth dan offsetHeight / offsetWidth:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

Hasil txt akan:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Cobalah sendiri "

Contoh

Contoh ini menunjukkan perbedaan antara clientHeight / clientWidth dan offsetHeight / offsetWidth, ketika kita menambahkan scrollbar untuk elemen:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

Hasil txt akan:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Cobalah sendiri "

<Elemen Object