element.className özelliği elementin sınıfını (class) değiştirir veya ismini verir.
Sözdizimi
eleman.className = isim;
isim = eleman.className
| isim | Elementin yeni sınıf adı. |
Dönüş Değeri
| isim | Elementin öğrenilen sınıf adı. |
Aşağıdaki örnek, bir div elementinin className özelliği kullanılarak sınıfının, daha önce tanımlanmış CSS biçimleri ile değiştirilmesini göstermektedir.
<!------------------- CSS Biçimleri ---------------------->
<style type="text/css">
.kirmiziSinif {
background-color:red;
}
.maviSinif {
background-color:blue;
}
</style>
<!------------------- Div ve Butonlar -------------------->
<div id="kutu" style="width:100px; height:50px;">
<span id="icerik" style="color:white;">
</span>
</div>
<br/>
<input type="button" value="Kırmızı Yap" onClick="kirmiziYap()" />
<input type="button" value="Mavi Yap" onClick="maviYap()" />
<!----------------------- Script -------------------------->
<script type="text/javascript">
function kirmiziYap() {
document.getElementById('kutu').className = 'kirmiziSinif';
document.getElementById('icerik').innerHTML = 'Kırmızı oldum!';
}
function maviYap() {
document.getElementById('kutu').className = 'maviSinif';
document.getElementById('icerik').innerHTML = 'Mavi oldum!';
}
</script>
Test edin