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.