HTML DOM Öğe sınıfıAdı
❮ Öğe NesnesiÖrnek
Bir öğe için sınıf niteliğini ayarlayın:
element.className = "myStyle";
"myDIV" sınıf niteliğini alın:
let value = document.getElementById("myDIV").className;
İki sınıf adı arasında geçiş yapın:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
Aşağıda daha fazla örnek.
Tanım ve Kullanım
Özellik className
, bir öğenin sınıf niteliğini ayarlar veya döndürür.
Ayrıca bakınız:
Sözdizimi
className özelliğini döndürün:
HTMLElementObject.className
className özelliğini ayarlayın:
HTMLElementObject.className = class
Mülk değerleri
Value | Description |
class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
Geri dönüş değeri
Type | Description |
String | The class, or a space-separated list of classes, of an element |
Daha fazla örnek
İlk <div> öğesinin (varsa) sınıf özniteliğini alın:
let value = document.getElementsByTagName("div")[0].className;
Birden çok sınıfa sahip bir sınıf niteliği alın:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
Mevcut bir sınıf özniteliğinin üzerine yenisini yazın:
element.className = "newClassName";
Mevcut değerlerin üzerine yazmadan yeni sınıflar eklemek için bir boşluk ve yeni sınıflar ekleyin:
element.className += " class1 class2";
"myDIV", "myStyle" sınıfına sahipse, yazı tipi boyutunu değiştirin:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
Bu sayfanın üst kısmından 50 piksel kaydırırsanız, "test" sınıfı eklenir:
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Tarayıcı Desteği
element.className
tüm tarayıcılarda desteklenir:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ Öğe Nesnesi