HTML DOM className Propery

Exemple

Définissez la classe pour un <div> élément avec id = « myDiv »:

document.getElementById("myDIV").className = "mystyle";

Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.

Définition et utilisation

Les ensembles de propriétés className ou retourne le nom de classe d'un élément (la valeur de l'attribut de classe d'un élément).

Astuce: Une propriété similaire à className est la classList propriété.

Support du navigateur

Propriété
className	Oui	Oui	Oui	Oui	Oui

Syntaxe

Retour la propriété className:

HTMLElementObject .className

Définissez la propriété className:

HTMLElementObject .className= class

Valeurs de propriété

Valeur	La description
class	Indique le nom de classe d'un élément. Pour appliquer plusieurs classes, en les séparant par des espaces, comme "test demo"

Détails techniques

Valeur de retour:	Une chaîne, représentant la classe, ou une liste séparée par des espaces de classes, d'un élément

autres exemples

Exemple

Obtenez le nom de la classe de la première <div> élément dans le document (if any) le (if any) :

var x = document.getElementsByTagName("DIV")[0].className;

Le résultat de x sera:

mystyle

Essayez vous - même »

Exemple

D'autres exemples sur la façon d'obtenir le nom de la classe d'un élément:

var x = document.getElementsByClassName("mystyle")[0].className;
var y = document.getElementById("myDIV").className;

Essayez vous - même »

Exemple

Obtenez les noms de classe d'un élément avec plusieurs classes:

<div id="myDIV" class="mystyle test example">I am a DIV element</div>

var x = document.getElementById("myDIV").className;

Le résultat de x sera:

mystyle text example

Essayez vous - même »

Exemple

Écrasement un nom de classe existante par une nouvelle:

<div id="myDIV" class="mystyle">I am a DIV element</div>

document.getElementById("myDIV").className = "newClassName";

Essayez vous - même »

Exemple

Pour ajouter une classe à un élément, sans écraser les valeurs existantes, insérez un espace et le nouveau nom de la classe:

document.getElementById("myDIV").className += " anotherClass";

Essayez vous - même »

Exemple

S'il y a une classe de "mystyle" dans un élément avec id = « myDiv », changer sa taille de la police:

var x = document.getElementById("myDIV");

if (x.className === "mystyle") {
x.style.fontSize = "30px";
}

Essayez vous - même »

Exemple

Bascule entre les noms de classe sur différentes positions de défilement - Lorsque l'utilisateur fait défiler vers le bas de 50 pixels de haut, le nom de la classe "test" seront ajoutés à un élément (and removed when scrolled up again) à (and removed when scrolled up again) le (and removed when scrolled up again) .