height

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

yukseklik

Aş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