Dans le passé, nous devions utiliser certaines méthodes de JS ou JQuery, Hasclass, AddClass et RemoveClass. gênant.
La nouvelle liste de classe de H5 nous permet d'exploiter le nom de catégorie de nos éléments les plus pratiques.
AvisLa compatibilité des listes de classe est quelque peu médiocre, pas compatible avec le navigateur IE ci-dessous IE10.
Exemple exemplaire
<! taille de police: 25px;} </ style> </ head> <body> <p> Cliquez sur le bouton pour ajouter la classe MyStyle à l'élément div. </p> <Button OnClick = MyFunction ()> Cliquez sur moi </ Button> <div id = MyDiv> Je suis un élément div. </div> <script> function myFunction () {document.getElementById (myDiv) .classList.add (mystyle);} </cript> </ body> </html> Nouvelle catégorieÀ l'aide de la méthode ADD, vous pouvez ajouter une ou plusieurs catégories à l'élément de page:
document.getElementById (MyDiv) .classList.add (MyStyle);Supprimer une classe
Avec la méthode de suppression, vous pouvez supprimer une seule classe CSS:
Document.getElementById (MyDiv) .classList.Remove (MyStyle);Nom de la catégorie de commutation dans les éléments
Communiquez les noms de catégorie dans les éléments. Utilisez la méthode de bascule, grammaire: bascule (classe, vrai | false)
Le premier paramètre est le nom de classe à supprimer dans l'élément et renvoie false.
Si le nom n'existe pas, le nom de classe sera ajouté à l'élément et renvoie true.
Le second est des paramètres facultatifs. Par exemple:
Enlever un
document.getElementById (MyDiv) .classList.toggle (CllasStoreMove, false);
Ajouter un
document.getElementById (MyDiv) .classList.toggle (Classtoadd, true);
Remarque: Internet Explorer ou Opera 12 et ses versions antérieures ne prennent pas en charge le deuxième paramètre
Vérifiez s'il contient une certaine classeUtilisez la méthode CONTAINS pour déterminer si une classe existe et retourner à la valeur booléenne.
// renvoie true ou faux document.getElementById (myDiv) .classList.Contains (MyDiv);
Ce qui précède est tout le contenu de cet article.