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