myNotlar Logo

Element.clientWidth


Internet Explorer Firefox Opera

clientWidth özelliği, bir elementin sağ ve sol yan dolguları (padding) dahil, görünen iç genişliğini verir. Bu genişliğe, dikey kaydırma çubuğu (vertical scroll bar), kenarlık (border) ve sağ ve sol kenar payı (margin) genişlikleri dahil değildir.

Sözdizimi

icGenislik = element.clientWidth

Dönüş Değeri

icGenislikElementin sağ ve sol padding değerleri dahil, dikey kaydırma çubuğu (horizontal scroll bar), kenarlık (border) ve sağ ve sol kenar payları (margin) hariç iç genişliği.

Aşağıdaki örnek, bir div elementinin "border-width" (borderWidth), "margin" ve "padding" CSS özelliklerindeki değişimlerin clientWidth ö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>" + 
        "clientWidth  : " + ornekDiv.clientWidth + "<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 | Oyunlar |