HTML DOM Element className
❮ Obiekt elementuPrzykład
Ustaw atrybut class dla elementu:
element.className = "myStyle";
Uzyskaj atrybut klasy „myDIV”:
let value = document.getElementById("myDIV").className;
Przełącz między dwiema nazwami klas:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
Więcej przykładów poniżej.
Definicja i użycie
Właściwość classNameustawia lub zwraca atrybut klasy elementu.
Zobacz też:
Składnia
Zwróć właściwość className:
HTMLElementObject.className
Ustaw właściwość className:
HTMLElementObject.className = class
Wartości nieruchomości
| Value | Description |
| class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
Wartość zwrotu
| Type | Description |
| String | The class, or a space-separated list of classes, of an element |
Więcej przykładów
Uzyskaj atrybut class pierwszego elementu <div> (jeśli istnieje):
let value = document.getElementsByTagName("div")[0].className;
Uzyskaj atrybut klasy z wieloma klasami:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
Zastąp istniejący atrybut klasy nowym:
element.className = "newClassName";
Aby dodać nowe klasy bez nadpisywania istniejących wartości, dodaj spację i nowe klasy:
element.className += " class1 class2";
jeśli "myDIV" ma klasę "myStyle", zmień rozmiar czcionki:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
Jeśli przewiniesz 50 pikseli od góry tej strony, zostanie dodany „test” klasy:
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Obsługa przeglądarki
element.classNamejest obsługiwany we wszystkich przeglądarkach:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |
❮ Obiekt elementu