HTML DOM Element className özniteliği

Tanım ve kullanım

className Öznitelik ayarlamak veya elementin sınıf özniteliğini döndürmek.

Ayrıca bakınız:

Element classList özniteliği

Document getElementsByClassName() yöntemi

HTML DOM Style Nesnesi

Örnek

Örnek 1

Elementin sınıf özniteliğini ayarlayın:

element.className = "myStyle";

kişisel olarak deneyin

Örnek 2

"myDIV" sınıf özniteliğini alın:

let value = document.getElementById("myDIV").className;

kişisel olarak deneyin

Örnek 3

İki sınıf adı arasında geçiş yapın:

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

kişisel olarak deneyin

İpucu:Daha fazla örnek için sayfa altına bakın.

Sözdizimi

className özniteliğini döndürür:

HTMLElementObject.className

className özniteliğini ayarlayın:

HTMLElementObject.className = class

Öznitelik değeri

Değer Açıklama
class

Elemanın sınıf adı.

Birden fazla sınıfı boşlukla ayırın, örneğin "test demo".

Dönüş değeri

Tür Açıklama
String elemanın sınıfı, veya boşlukla ayrılmış sınıf listesi.

Daha fazla örnek

örnek 4

İlk <div> öğesinin class özelliğini alın (varsa):

let value = document.getElementsByTagName("div")[0].className;

kişisel olarak deneyin

örnek 5

Birden fazla sınıfı içeren class özelliğini alın:

<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

kişisel olarak deneyin

örnek 6

Mevcut class özelliğini yeni class özelliği ile değiştirin:

element.className = "newClassName";

kişisel olarak deneyin

örnek 7

Mevcut değeri geçirmemek için yeni sınıf eklemek istiyorsanız, bir boşluk ve yeni sınıf ekleyin:

element.className += " class1 class2";

kişisel olarak deneyin

örnek 8

"myDIV" sınıfı "myStyle" içeriyorsa, yazı boyutunu değiştirin:

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

kişisel olarak deneyin

örnek 9

Sayfa üstünden 50 piksel kaydırdığınızda "test" sınıfını ekler:

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

kişisel olarak deneyin

tarayıcı desteği

tüm tarayıcılar destekler element.className：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
destek destek destek destek destek destek

相关页面

CSS eğitimi:CSS dilbilgisi

CSS referans el kitabı:CSS .class seçici