myn.getElemSize() fonksiyonu, parametre olarak aldığı elementin, ana elementi içinde kapladığı alanın genişliğini ve yüksekliğini verir. Bu ölçülere, elementin style nesnesinin padding ve border gibi boyutlarını değiştirebilecek değerler de dahildir. Fakat, style.margin özelliğinin değeri, elementin dış bölümü ile ilgili olduğu için dahil değildir.
Sözdizimi
boyut = myn.getElemSize(elem)
| elem | Genişliği ve yüksekliği öğrenilecek element. |
Dönüş Değeri
| boyut | Elementin genişlik ve yükseklik bilgilerini içeren boyut (size) nesnesi. |
boyut Nesnesi Özellikleri
| Özellik | Açıklama |
|---|
| boyut.gen | Elementin genişliğini verir. |
| boyut.yuk | Elementin yüksekliğini verir. |
Kullanım Örneği
<script type="text/javascript" src="mynotlar_getElemSize.js"></script>
<style type="text/css">
.ornekDiv1 {
width: 100px;
height: 30px;
margin: 5px;
background-color: red;
}
.ornekDiv2 {
width: 50px;
height: 40px;
padding: 5px;
background-color: green;
}
.ornekDiv3 {
width: 80px;
height: 30px;
padding: 2px;
border: solid 3px black;
background-color: #3399FF;
}
</style>
<p><i>Kutu boyutlarını öğrenmek için kutuların içine tıklayınız.</i></p>
<table><tr>
<td><div class="ornekDiv1" onclick="boyutGoster(this)"></div></td>
<td><div class="ornekDiv2" onclick="boyutGoster(this)"></div></td>
<td><div class="ornekDiv3" onclick="boyutGoster(this)"></div></td>
</tr></table>
<script type="text/javascript">
function boyutGoster(elem) {
var size = myn.getElemSize(elem);
alert("Genişlik : " + size.gen +
"\nYükseklik : " + size.yuk);
}
</script>
Test Edin
Kutu boyutlarını öğrenmek için kutuların içine tıklayınız.
mynotlar_getElemSize.js
/*
"myn.getElemSize()" Fonksiyon Betiği v1.0
Telif Hakkı (c) 2008, mynotlar.com, Tüm hakları saklıdır.
http://www.mynotlar.com
*/
(window.myn = myn = window.myn || {}).getElemSize = function(e)
{
return {gen : e.offsetWidth || (e.style ? e.style.pixelWidth : 0),
yuk : e.offsetHeight || (e.style ? e.style.pixelHeight : 0)};
}