HTML DOM Element offsetWidth özelliği

Tanım ve Kullanım

offsetWidth Özellik, elementin görünen genişliğini (piksel cinsinden) döndürür, iç dolgu, çerçeve ve kaydırıcı içerir, ancak dış dolgu içermez.

offsetWidth Özellikler salt okunurdur.

Ayrıca bakınız:CSS Kutu Modeli Eğitimi

offsetParent

Tüm blok elementleri, offset ebeveynine göre offset değerlerini rapor eder:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Offset ebeveyni, en yakın olmayan statik konum olan ataların en yakınıdır.

Eğer offset ebeveyni yoksa, offset değeri metin belgesinin metnine göre belirlenir.

Ayrıca bakınız:

offsetHeight özelliği

offsetParent özelliği

offsetTop özelliği

offsetLeft özelliği

clientTop özelliği

clientLeft özelliği

clientWidth özelliği

clientHeight özelliği

Örnek

Örnek 1

"myDIV" genişliği ve yüksekliğini, iç dolgu ve çerçeve ile alın:

const elmnt = document.getElementById("myDIV");
let text = "Yükseklik, dolgu ve çerçeve ile: " + elmnt.offsetHeight + "px<br>";
text += "Genişlik, dolgu ve çerçeve ile: " + elmnt.offsetWidth + "px";

Kendiniz Deneyin

Örnek 2

clientHeight/clientWidth ile offsetHeight/offsetWidth arasındaki fark

Kaydırıcısız:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Yükseklik, dolgu ile: " + elmnt.clientHeight + "px<br>";
text += "Yükseklik, dolgu ve çerçeve ile: " + elmnt.offsetHeight + "px<br>";
text += "Genişlik, dolgu ile: " + elmnt.clientWidth + "px<br>";
text += "Genişlik, dolgu ve çerçeve ile: " + elmnt.offsetWidth + "px";

Kendiniz Deneyin

Kaydırıcı ile:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Yükseklik, dolgu ile: " + elmnt.clientHeight + "px<br>";
text += "Yükseklik, dolgu, çerçeve ve kaydırıcı ile: " + elmnt.offsetHeight + "px<br>";
text += "Genişlik, dolgu ile: " + elmnt.clientWidth + "px<br>";
text += "Genişlik, dolgu, çerçeve ve kaydırıcı ile: " + elmnt.offsetWidth + "px";

Kendiniz Deneyin

Gramer

element.offsetWidth

Dönüş Değeri

Tür Açıklama
Sayı Elementin görsel genişliği (piksel olarak), iç dolgu, çerçeve ve kaydırıcı içerir.

Tarayıcı Desteği

Tüm tarayıcılar destekler element.offsetWidth：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Destek Destek Destek Destek Destek Destek