En son web geliştirme öğreticiler
 

HTML DOM offsetWidth Propery

<Eleman Nesne

Örnek

Yükseklik ve bir genişliğini alın <div> dolgu ve sınırın dahil elemanı,:

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

Txt sonucu olacaktır:

Height with padding and border: 280px
Width with padding and border: 430px
Kendin dene "

Daha "Try it Yourself" Aşağıdaki örnekler.

Tanımı ve Kullanımı

offsetWidth mülkiyet görüntülenebilir dolgu, sınır ve kaydırma dahil piksel, bir elementin genişliği değil, marj döndürür.

Nedeni "viewable" elemanın içeriği elemanının fiili genişliğinden daha geniş olması durumunda, sadece görünür genişliği dönecektir bu özellik nedeniyle kelimesi belirtilirse, bir (See "More Examples") .

Not: Bu özelliği anlamak için, anlamalısınız CSS Kutu Modeli .

Öneri: Bu özellik genelde birlikte kullanılır offsetHeight özelliği.

Ipucu: clientHeight ve clientWidth sadece dolgu içeren bir elemanın görüntülenebilir yüksekliğini ve genişliğini dönüş özellikleri.

İpucu: bir öğeye kaydırma çubukları eklemek CSS kullanmak için taşma özelliği.

Bu özellik salt okunur.

Tarayıcı Desteği

özellik
offsetWidth Evet Evet Evet Evet Evet

Sözdizimi

element .offsetWidth

Teknik detaylar

Geri dönüş değeri: dolgu, sınır ve bir kaydırma çubuğu içeren piksel bir elemanın görüntülenebilir genişliğini temsil eden bir sayı,
Örnekler

Diğer Örnekler

Örnek

Bu örnek clientHeight / clientWidth ve offsetHeight / offsetWidth arasındaki farkı gösterir:

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

Txt sonucu olacaktır:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Kendin dene "

Örnek

Biz elemana bir kaydırma çubuğu eklediğinizde Bu örnek, clientHeight / clientWidth ve offsetHeight / offsetWidth arasındaki farkı gösterir:

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

Txt sonucu olacaktır:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Kendin dene "

<Eleman Nesne