myNotlar Logo

Element.offsetWidth


Internet Explorer Firefox Opera

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

Sözdizimi

genislik = element.offsetWidth

Dönüş Değeri

genislikElementin 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
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |