myNotlar Logo

Element.clientHeight


Internet Explorer Firefox Opera

clientHeight özelliği, bir elementin üst ve alt yan dolguları (padding) dahil, görünen iç yüksekliğinin öğrenilmesini sağlar. Bu yüksekliğe yatay kaydırma çubuğu (horizontal scroll bar), kenarlık (border) ve üst ve alt kenar payı (margin) yükseklikleri dahil değildir. Fakat, tarayıcıların bu değerleri içeriye veya dışarıya doğru farklı şekilde genişlettikleri için clientHeight özelliği bu değer değişimlerinden etkilenebilir.

Elementlerin/Nesnelerin ölçeklendirme işlemlerinde Internet Explorer, elementin doküman üzerinde kapladığı alanı sabit tutmaya çalışırak özellikle kenarlık (border) değerini içe doğru genişletmeye meyillidir. Fakat Firefox ve Opera, elementin görünen içerik alanını sabit tutmaya çalışırak kenarlık (border) değerini dışa doğru genişletmeye meyillidir ki bu, elementin doküman üzerinde kapladığı alanı arttırır. Bu yüzden clientHeight özelliği bu değer değişimlerinden farklı tarayıcılarda farklı şekilde etkilenebilir.

Sözdizimi

icYukseklik = element.clientHeight

Dönüş Değeri

icYukseklikElementin üst ve alt padding değerleri dahil, yatay kaydırma çubuğu (horizontal scroll bar), kenarlık (border) ve üst ve alt kenar payları (margin) hariç iç yüksekliği.

Aşağıdaki örnek, bir div elementinin "border-width" (borderWidth), "margin" ve "padding" CSS özelliklerindeki değişimlerin clientHeight özelliğine etkilerini göstermektedir.

<script type="text/javascript">

var ornekDiv = document.getElementById('ornekDiv');
var bilgiDiv = document.getElementById('bilgiDiv');

var marginDeger = 0;
var paddingDeger = 0;
var borderDeger = 1;

function bilgiYaz()
{
    bilgiDiv.innerHTML = "<b>" + 
        "clientHeight : " + ornekDiv.clientHeight + "<br/>" +
        "Padding      : " + ornekDiv.style.padding + "<br/>" +
        "Margin       : " + ornekDiv.style.margin + "<br/>" +
        "Border       : " + ornekDiv.style.borderWidth + "<br/>" +        
        "</b>";
}

function marginAyarla(param)
{
    marginDeger += param;
    marginDeger = marginDeger < 0 ? 0 : marginDeger;
    ornekDiv.style.margin = marginDeger + 'px';
    bilgiYaz();
}

function paddingAyarla(param)
{
    paddingDeger += param;
    paddingDeger = paddingDeger < 0 ? 0 : paddingDeger;
    ornekDiv.style.padding = paddingDeger + 'px';
    bilgiYaz();
}

function borderAyarla(param)
{
    borderDeger += param;
    borderDeger = borderDeger < 0 ? 0 : borderDeger;
    ornekDiv.style.borderWidth = borderDeger + 'px';
    bilgiYaz();
}
bilgiYaz();
</script>

<style type="text/css">
input.ornekButon
{
    width:24px;
    height:24px;
    font-size:12pt;
    border:solid 1px #404040;
}
input.ornekButon:hover
{
    background-color:#999999;    
}
#ornekDiv
{
    border:solid 1px red;
    padding:0px;
    margin:0px;
    width: 120px; 
    height: 90px;
}
</style>

<table>
<tr>
<td style="border:solid 1px black;">
    <div id="ornekDiv">
        myNotlar <br/>
        myNotlar <br/>
        myNotlar <br/>
    </div>
</td>
</tr></table>
    <br/>
<div id="bilgiDiv"></div>
    <br/>

<table>
    <tr><td>Margin</td>
        <td>:
            <input class="ornekButon" type="button" value="-" onClick="marginAyarla(-1)"/>
            <input class="ornekButon" type="button" value="+" onClick="marginAyarla(1)"/>
        </td></tr>
    <tr><td>Border</td>
        <td>:
            <input class="ornekButon" type="button" value="-" onClick="borderAyarla(-1)"/>
            <input class="ornekButon" type="button" value="+" onClick="borderAyarla(1)"/>
        </td></tr>
    <tr><td>Padding</td>
        <td>:
            <input class="ornekButon" type="button" value="-" onClick="paddingAyarla(-1)"/>
            <input class="ornekButon" type="button" value="+" onClick="paddingAyarla(1)"/>
        </td></tr>
</table>
Test Edin
myNotlar
myNotlar
myNotlar


Margin :
Border :
Padding :
İ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 | YasinKa |