Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie schalte ich die Klasse eines Elements ohne jQuery in reinem JavaScript um?

Susan Sarandon
Freigeben: 2024-10-21 11:11:29
Original
779 Leute haben es durchsucht

How to Toggle an Element's Class without jQuery in Pure JavaScript?

Elementklassen in reinem JavaScript umschalten

F: Wie schalte ich die Klasse eines Elements in reinem JavaScript ohne jQuery um?

Die toggleClass-Methode von jQuery bietet eine einfache Möglichkeit, die Klassen eines Elements umzuschalten. Aber wie lässt sich das mit reinem JavaScript erreichen?

A:

  1. document.classList.toggle():

    Moderne Browser unterstützen die Methode classList.toggle, die die Klassenmanipulation vereinfacht. Zum Beispiel:

    <code class="js">var menu = document.querySelector('.container-fluid');
    menu.classList.toggle('menu-hidden');</code>
    Nach dem Login kopieren
  2. classList.js:

    Für ältere Browser, denen classList.toggle fehlt, können Sie classList.js verwenden Polyfill:

    <code class="js">var menu = document.querySelector('.menu');
    classList.toggle(menu, 'hidden-phone');</code>
    Nach dem Login kopieren

Zusätzliche Hinweise:

  • Klassenliste: Verwenden Sie Klassennamen anstelle von IDs für eine verbesserte Effizienz.
  • IDs vermeiden:IDs erstellen globale Variablen im JavaScript-Fensterobjekt.

Das obige ist der detaillierte Inhalt vonWie schalte ich die Klasse eines Elements ohne jQuery in reinem JavaScript um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
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
Neueste Artikel des Autors
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!