Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-03-18 16:19:00
Original
1821 Leute haben es durchsucht

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] }   
}
Nach dem Login kopieren

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');
Nach dem Login kopieren

Eine CSS-Klasse löschen

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

myp.classList.remove('myCssClass');
Nach dem Login kopieren

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'); //现在是删除
Nach dem Login kopieren

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
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!