Element HTML DOM className
❮ Objekt prvkuPříklad
Nastavte atribut třídy pro prvek:
element.className = "myStyle";
Získejte atribut třídy "myDIV":
let value = document.getElementById("myDIV").className;
Přepínání mezi dvěma názvy tříd:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
Další příklady níže.
Definice a použití
Vlastnost classNamenastavuje nebo vrací atribut class prvku.
Syntax
Vraťte vlastnost className:
HTMLElementObject.className
Nastavte vlastnost className:
HTMLElementObject.className = class
Hodnoty vlastností
| Value | Description |
| class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
Návratová hodnota
| Type | Description |
| String | The class, or a space-separated list of classes, of an element |
Další příklady
Získejte atribut class prvního prvku <div> (pokud existuje):
let value = document.getElementsByTagName("div")[0].className;
Získejte atribut třídy s více třídami:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
Přepište existující atribut třídy novým:
element.className = "newClassName";
Chcete-li přidat nové třídy, aniž byste přepsali existující hodnoty, přidejte mezeru a nové třídy:
element.className += " class1 class2";
pokud má „myDIV“ třídu „myStyle“, změňte velikost písma:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
Pokud se posunete o 50 pixelů od horní části této stránky, přidá se třída „test“:
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Podpora prohlížeče
element.classNameje podporován ve všech prohlížečích:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |
❮ Objekt prvku