myNotlar Logo

className/class


className özelliği, elemente bir veya aralarında boşluk bırakarak birden fazla sınıf ismi atanmasını sağlar. Sınıf isimleri genel olarak stil şablonlarında sınıf seçici ile elementleri biçimlendirmek için kullanılsa da genel amaca hitap eder.

HTML Sözdizimi

<element class="sinif" > ... </element>

JavaScript & DOM Sözdizimi

<script type="text/javascript">

element.className = sinif;

sinif = element.className

</script>
sinifAralarında boşluk bırakılarak bir veya daha fazla sınıf adını belirtir.

Dönüş Değeri

sinifSınıf isimleri döner.

Örnek

Aşağıdaki örnek, bir DIV elementinin className özelliğine dinamik olarak isteğe bağlı iki farklı sınıf atanmasını 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

Elementler

class (className) özelliğinin kullanıldığı HTML etiketleri/elementleri

A (Anchor) | ABBR | ACRONYM | ADDRESS | AREA | B (Bold) | BDO | BIG | BLOCKQUOTE | BODY | BR | BUTTON | CANVAS | CAPTION | CITE | CODE | COL | COLGROUP | DD | DEL | DFN | DIV | DL | DT | EM | FIELDSET | FORM | FRAME | FRAMESET | H1,H2,H3,H4,H5,H6 | HR | I (Italic) | IFRAME | IMG | INPUT-hidden | INPUT-text | INPUT-password | INPUT-checkbox | INPUT-radio | INPUT-submit | INPUT-reset | INPUT-file | INPUT-image | INPUT-button | INS | KBD | LABEL | LEGEND | LI | LINK | MAP | MARQUEE | NOFRAMES | NOSCRIPT | OBJECT | OL | OPTGROUP | OPTION | P (Paragraph) | PRE | Q (Quote) | SAMP | SELECT | SMALL | SPAN | STRONG | SUB | SUP | TABLE | TBODY | TD | TEXTAREA | TFOOT | TH | THEAD | TR | TT | U (Underline) | UL | VAR

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