myNotlar Logo

height


Internet Explorer 4 Firefox Opera 3.5

height özelliği, elementin içerik alanının yüksekliğ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 üst ve alt kenarlık (border) ve dolgu (padding) yükseklikleri height değerine dahil edilir.

DOM Sözdizimi

element.style.height = "yukseklik"

CSS Sözdizimi

height: yukseklik
yukseklikAşağıdaki değerleri alarak elementin yüksekliğini belirler.
  • auto : Elementin yüksekliği içeriğine göre otomatik belirlenir.
  • Yükseklik : CSS Ölçü Birimleri ile belirtilebilir.
  • Yüzde değer : İçinde bulunduğu ana element bloğunun yükseklik değerine göre yüzde değer alabilir. 100% değeri ana elementinin yüksekliğidir.

Aşağıdaki örnek, 20px yüksekliğe sahip bir div elementinin fare imleci ile üzerine gelindiğinde setTimeout metodu kullanılarak height özelliğine 20ms zaman aralıklarıyla değer atanıp, animasyonlu bir şekilde yüksekliğinin arttırılmasını ve fare imleci div üzerinden ayrıldığında yavaşca kapatılmasını göstermektedir.

<style type="text/css">
#ornekDiv
{
    border:solid 1px red;
    margin:10px;
    width:140px;
    height:20px;
    overflow:hidden;
}

</style>

<script type="text/javascript">
var ornekMin = 20;
var ornekMaks = 200;
var getElem = function(){return document.getElementById("ornekDiv");}
var aciliyor = false;
var boyu = ornekMin;
var sayac = null;

function ac()
{
    if(aciliyor) {
        boyu += 5;
        getElem().style.height = boyu + "px";
        if(boyu < ornekMaks)
            sayac = setTimeout("ac()", 20);
        else
            aciliyor = false;
    }
    else
    {
        if(sayac) {
            clearTimeout(sayac);
            sayac = null;
        }
        aciliyor = true;
        ac();
    }
}
function kapat()
{
    if(!aciliyor) {
        boyu -= 5;
        getElem().style.height = boyu + "px";
        if(boyu > ornekMin)
            sayac = setTimeout("ac()", 20);
        else
            aciliyor = true;
    }
    else
    {
        if(sayac) {
            clearTimeout(sayac);
            sayac = null;
        }
        aciliyor = false;
        kapat();
    }
}

</script>

<div id="ornekDiv" onMouseOver="ac()" onMouseOut="kapat()">
    <b>Örnek Konu Başlığı</b>
    <p>
    Lorem ipsum dolor sit amet. 
    Lorem ipsum dolor sit amet. 
    Lorem ipsum dolor sit amet. 
    </p>
    <ul style="list-style-position:inside; margin-left:10px;">
        <li><a href="http://www.mynotlar.com/default.aspx">Ana Sayfa</a></li>
        <li><a href="http://www.mynotlar.com/javascript/default.aspx">Javascript</a></li>
        <li><a href="http://www.mynotlar.com/html_dom/default.aspx">DOM</a></li>
    </ul>
</div>

Test Edin
Örnek Konu Başlığı

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

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