Element.offsetWidth

offsetWidth özelliği elementin, ana elementi içinde kapladığı genişlik değerini verir.

Sözdizimi

genislik = element.offsetWidth

Dönüş Değeri

genislik

Elementin ana elementin içindeki kapladığı piksel olarak genişliğinin tam sayı değeri.

Aşağıdaki örnek, bir tablo hücresi içinde bulunan div elementinin margin ve border değerleri değiştirildiği zaman offsetWidth özelliğindeki değişiklikleri göstermektedir.

<script type="text/javascript">

var kenarPayi = 0;
var kenarBoyu = 0;

// Element referansını döndürür.
function $(elementAdi) {
   return document.getElementById(elementAdi);
}

// margin, border ve offsetWidth bilgileri gösterir
function BilgiYaz()
{
   $('OrnMarginBilg').innerHTML = "margin değeri : " + $('OrnekKutu').style.margin;
   $('OrnGenisBilg').innerHTML = "offsetWidth : " + $('OrnekKutu').offsetWidth;
   $('OrnBorderBilg').innerHTML = "border değeri : " + $('OrnekKutu').style.borderWidth;
}

// margin değerini artttırır
function marginArttir() {
   kenarPayi++;
   $('OrnekKutu').style.margin = kenarPayi;
   BilgiYaz();
}
// margin değerini azaltır
function marginAzalt() {
   kenarPayi = kenarPayi > 0 ? --kenarPayi : 0;
   $('OrnekKutu').style.margin = kenarPayi;
   BilgiYaz();
}
// border değerini artttırır
function borderArttir() {
   kenarBoyu++;
   $('OrnekKutu').style.borderWidth = kenarBoyu;
   BilgiYaz();
}
// border değerini azaltır
function borderAzalt() {
   kenarBoyu = kenarBoyu > 0 ? --kenarBoyu : 0;
   $('OrnekKutu').style.borderWidth = kenarBoyu;
   BilgiYaz();
}

</script>

<input type="button" value="margin Arttır" onClick="marginArttir()" />
<input type="button" value="margin Azalt" onClick="marginAzalt()" />
<input type="button" value="border Arttır" onClick="borderArttir()" />
<input type="button" value="border Azalt" onClick="borderAzalt()" />
<table>
   <tr>
      <td id="OrnekHucre" style="padding:10px; background-color:#c0c0c0;">
      <div id="OrnekKutu" style="   
      border:solid 0px #a0a0c0;
      margin:0px;
      background-color:#e0e0e0;
      width:100px;
      height:100px;"></div>
     </td>
   </tr>
</table>

<div id="OrnMarginBilg"></div>
<div id="OrnBorderBilg"></div>
<div id="OrnGenisBilg"></div>

Test edin

İlgili Başlıklar