In der Vergangenheit mussten wir einige Methoden von JS oder JQuery, Hasclass, AddClass und Removeclass verwenden. störend.
Mit der neuen Classlist von H5 können wir den Kategoriennamen unserer bequemeren Elemente bedienen.
BeachtenDie Kompatibilität der Klassenlisten ist etwas schlecht und nicht mit dem IE -Browser unter IE10 kompatibel.
Vorbildliches Beispiel
<! Schriftgröße: 25px;} </style> </head> <body> <p> Klicken Sie auf die Schaltfläche, um das Div-Element die Mystyle-Klasse hinzuzufügen. </p> <button onclick = myFunction ()> Klicken Sie auf mich </button> <div id = mydiv> Ich bin ein Div -Element. </div> <script> Funktion myfunction () {document.getElementById (mydiv) .classList.add (mystyle);} </script> </body> </html> Neue KategorieMit der Methode hinzufügen können Sie dem Seitenelement eine oder mehrere Kategorien hinzufügen:
document.getElementById (mydiv) .classList.add (mystyle);Eine Klasse löschen
Mit der Methode entfernen können Sie eine einzelne CSS -Klasse löschen:
document.getElementById (mydiv) .classList.remove (mystyle);Schalterkategorienname in Elementen
Switch -Kategoriennamen in Elementen. Verwenden Sie die Umschaltmethode, Grammatik: Toggle (Klasse, True | False)
Der erste Parameter ist der Klassenname, der im Element entfernt und false zurückgegeben wird.
Wenn der Name nicht vorhanden ist, wird der Klassenname dem Element hinzugefügt und gibt True zurück.
Die zweite ist optionale Parameter. Zum Beispiel:
Einen entfernen
document.getElementById (mydiv) .classList.toggle (classtoremove, false);
Fügen Sie einen hinzu
document.getElementById (mydiv) .classList.toggle (classtoadd, true);
Hinweis: Internet Explorer oder Opera 12 und seine früheren Versionen unterstützen den zweiten Parameter nicht
Überprüfen Sie, ob es eine bestimmte Klasse enthältVerwenden Sie die enthaltende Methode, um festzustellen, ob eine Klasse existiert, und kehren Sie zum Booleschen Wert zurück.
// RECHTUNG TRUE oder FALSE DOCKEL.GetElementById (mydiv) .ClassList.Contains (mydiv);
Das oben genannte ist der Inhalt dieses Artikels.