myn.getElemSize()

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)};
}