myNotlar Logo

width


Internet Explorer 4 Firefox Opera 3.5

width özelliği, elementin içerik alanının genişliğini belirler. Elementin içerik alanına kenar dolgusu (padding), kenarlık genişliği (border) ve kenar payı (margin) dahil değildir. Eğer, !DOCTYPE doküman tipi belirtilmezse sol ve sağ kenarlık (border) ve dolgu (padding) genişlikleri width değerine dahil edilir.

DOM Sözdizimi

element.style.width = "genislik"

CSS Sözdizimi

width: genislik
genislik

Aşağıdaki değerleri alabilir.

  • auto : Elementin genişliği içeriğine göre otomatik belirlenir.
  • Genişlik : CSS Ölçü Birimleri ile belirtilebilir.
  • Yüzde değer : İçinde bulunduğu ana element bloğunun genişlik değerine göre yüzde değer alabilir. 100% değeri ana elementinin genişliğidir.

Aşağıdaki örnek, 60px genişliğe sahip td elementlerinin fare imleci ile üzerlerine gelindiğinde setTimeout metodu kullanılarak style.width özelliklerine 20ms zaman aralıklarıyla değer atayıp yavaşça genişliklerinin arttırılmasını ve fare imleci td elementlerinden ayrıldığında yavaşca kapatılmasını göstermektedir.

<style type="text/css">
#hucre1, #hucre2, #hucre3, #hucre4 {
    width:60px;
    height:40px;    
}
#hucre1 {
    background-color: red;
}
#hucre2 {
    background-color: green;
}
#hucre3 {
    background-color: navy;
}
#hucre4 {
    background-color: #F0D050;
}
</style>

<script type="text/javascript">

var enaz = 60;
var enfazla = 120;
var h1gen = h2gen = h3gen = h4gen = enaz;
var sayim1 = sayim2 = -1;
var aktif = null;

var getElem = function(a){return document.getElementById(a);}

function sifirla()
{
    clearTimeout(sayim1);
    clearTimeout(sayim2);
    h1gen = h2gen = h3gen = h4gen = enaz;
    getElem("hucre1").style.width = 
    getElem("hucre2").style.width = 
    getElem("hucre3").style.width = 
    getElem("hucre4").style.width = enaz + "px";
}
function ornekAc(elem)
{
    var devam = false;
    aktif = elem;
    if(elem.id == "hucre1" && h1gen < enfazla) {
        h1gen += 6;
        h2gen = h3gen = h4gen -= 2;
        devam = true;
    }
    else if(elem.id == "hucre2" && h2gen < enfazla)    {
        h2gen += 6;
        h1gen = h3gen = h4gen -= 2;
        devam = true;
    }
    else if(elem.id == "hucre3" && h3gen < enfazla)    {
        h3gen += 6;
        h1gen = h2gen = h4gen -= 2;
        devam = true;
    }
    else if(elem.id == "hucre4" && h4gen < enfazla)    {
        h4gen += 6;
        h1gen = h2gen = h3gen -= 2;    
        devam = true;
    } 
    
    getElem("hucre1").style.width = h1gen + "px";
    getElem("hucre2").style.width = h2gen + "px";
    getElem("hucre3").style.width = h3gen + "px";
    getElem("hucre4").style.width = h4gen + "px";
    
    if(devam) sayim1 = setTimeout("ornekAc(aktif)", 20);
}
function ornekKapat(elem)
{
    var devam = false;
    aktif = elem;
    if(elem.id == "hucre1" && h1gen > enaz) {
        h1gen -= 6;
        h2gen = h3gen = h4gen += 2;
        devam = true;
    }
    else if(elem.id == "hucre2" && h2gen > enaz)    {
        h2gen -= 6;
        h1gen = h3gen = h4gen += 2;
        devam = true;
    }
    else if(elem.id == "hucre3" && h3gen > enaz)    {
        h3gen -= 6;
        h1gen = h2gen = h4gen += 2;
        devam = true;
    }
    else if(elem.id == "hucre4" && h4gen > enaz)    {
        h4gen -= 6;
        h1gen = h2gen = h3gen += 2;    
        devam = true;
    } 
    
    getElem("hucre1").style.width = h1gen + "px";
    getElem("hucre2").style.width = h2gen + "px";
    getElem("hucre3").style.width = h3gen + "px";
    getElem("hucre4").style.width = h4gen + "px";
    
    if(devam) sayim2 = setTimeout("ornekKapat(aktif)", 20);
}
</script>
<input type="button" value="Sıfırla" onclick="sifirla()"/>


<table border="0" cellpadding="2" cellspacing="4"><tr>
    <td id="hucre1" onmouseover="ornekAc(this)" onmouseout="ornekKapat(this)"> </td>
    <td id="hucre2" onmouseover="ornekAc(this)" onmouseout="ornekKapat(this)"> </td>
    <td id="hucre3" onmouseover="ornekAc(this)" onmouseout="ornekKapat(this)"> </td>
    <td id="hucre4" onmouseover="ornekAc(this)" onmouseout="ornekKapat(this)"> </td>
</tr></table>

Test Edin
       
İ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 |