Detaillierte Einführung in die Verwendung von classList in HTML5 zum Betreiben von CSS-Klassen

In diesem Artikel wird hauptsächlich die Methode zur Verwendung von KlasseListe in HTML5 zum Betrieb von CSS-Klassen vorgestellt

Nachdem ich viele Jahre an JavaScript und JavaScript-Toolbibliotheken gearbeitet habe, habe ich oft diese Fantasie: Wann werden moderne Browser einige Hilfsmethoden und Klassenbibliotheken bereitstellen? Ersetzen wir Bibliotheken wie jQuery durch browsernative Methoden. Ich weiß, dass sich Browser in dieser Richtung definitiv verbessern werden, aber dieser Entwicklungsprozess wird nicht sehr schnell sein, und verschiedene Browser müssen solche Innovationen gemeinsam durchführen. Firefox, Google Chrome und insbesondere IE können nur mit diesen Mainstream-Browsern verwendet werden Funktionen können unsere Wünsche wirklich umgesetzt werden. Die gute Nachricht ist, dass der HTML5-API eine solche Funktion hinzugefügt wurde: classList.

In der HTML5-API verfügt jeder Knoten im Seiten-DOM über ein classList-Objekt. Programmierer können die darin enthaltenen Methoden verwenden, um CSS-Klassen auf dem Knoten hinzuzufügen, zu löschen und zu ändern. Mithilfe von classList können Programmierer außerdem feststellen, ob einem bestimmten Knoten eine bestimmte CSS-Klasse zugewiesen ist.

Element.classList

Es gibt viele nützliche Methoden in diesem classList-Objekt:

{   
 length: {number}, /* # of class on this element */   
 add: function() { [native code] },   
 contains: function() { [native code] },   
 item: function() { [native code] }, /* by index */   
 remove: function() { [native code] },   
 toggle: function() { [native code] }   
}

Wie Sie oben sehen können, Element.classList Das Die Klasse ist klein, aber jede Methode darin ist nützlich.

CSS-Klasse hinzufügen

Mit der Add-Methode können Sie eine oder mehrere CSS-Klassen zu Seitenelementen hinzufügen:

myp.classList.add('myCssClass');

Eine CSS-Klasse löschen

Mit der Remove-Methode können Sie eine einzelne CSS-Klasse löschen:

myp.classList.remove('myCssClass');

Sie können in dieser Methode mehrere Klassen gleichzeitig übergeben Namen, durch Leerzeichen getrennt, aber das Ausführungsergebnis entspricht wahrscheinlich nicht Ihren Erwartungen.

Anwesenheit oder Abwesenheit der CSS-Klasse umkehren

myp.classList.toggle('myCssClass'); //现在是增加
myp.classList.toggle('myCssClass'); //现在是删除

Die Funktion dieser Methode besteht darin, dass das myp-Element diese CSS-Klasse nicht hat , es wird neu sein Fügen Sie diese CSS-Klasse hinzu; wenn das myp-Element bereits über diese CSS-Klasse verfügt, wird sie gelöscht. Es handelt sich um eine Umkehroperation.

Überprüfen Sie, ob es eine bestimmte CSS-Klasse enthält

myp.classList.contains('myCssClass'); //returns true or false

Alle modernen Browser (Firefox, Google Chrome usw.) unterstützen derzeit diese classList-Klasse Ich glaube, dass neue JavaScript-Klassenbibliotheken die Klasse classList verwenden werden, um die CSS-Klasse der Seite zu betreiben, ohne wie zuvor das Klassenattribut des Elementknotens analysieren zu müssen!

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verwendung von classList in HTML5 zum Betreiben von CSS-Klassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!