Verwenden Sie JavaScript, um CSS -Klassen dynamisch hinzuzufügen und zu l?schen, um Webelemente leicht zu manipulieren! In diesem Artikel wird erl?utert, wie die Attribute von JavaScript className und classList zu verwenden, um CSS -Klassen effizient zu verwalten und die dynamische ?nderung von Webseitenelementen zu ermitteln, z. B. das Anzeigen/Verstecken von Menüs, Formulierfehler oder Elementanimationen.

Kernpunkte:

• JavaScript kann verwendet werden, um Seitenelemente dynamisch zu ?ndern, basierend auf Benutzerinteraktionen (z. B. Zeigen/Verstecken von Menüs, Hervorhebung von Formularfehlern oder Animationseffekten).
• className und classList Eigenschaften sind leistungsstarke Tools für den Betrieb von CSS -Klassen; className classList kann Funktionen erstellen und Klassen zu Elementen mit
oder
• addieren oder l?schen. Diese Funktionen k?nnen einen String -Selektor oder ein Element selbst als Parameter annehmen, das Element durchlaufen und die angegebene Klasse hinzufügen oder l?schen. className Das Attribut classList
(unterstützt von Browsern in IE10 und oben) enth?lt eine Reihe von Methoden zum Betrieb von Klassen, einschlie?lich
• , classList und add, wobei der Prozess des Hinzufügens oder L?schens von Klassen vereinfacht wird. remove toggle

Kompatibilit?tsschema: Verwenden Sie

Eigenschaften className Das Attribut

erm?glicht den Zugriff auf das Klassenattribut des HTML -Elements. Durch String -Operationen k?nnen wir Klassen hinzufügen und l?schen. Wir werden die

-Methode verwenden, um HTML -Elemente auszuw?hlen (kompatibel mit IE8 und über den Browsern). className querySelectorAll()

Klasse hinzufügen:

function addClass(elements, myClass) {
  if (!elements) return;
  if (typeof elements === 'string') elements = document.querySelectorAll(elements);
  else if (elements.tagName) elements = [elements];
  for (let i = 0; i < elements.length; i++) {
    if (!(' ' + elements[i].className + ' ').includes(' ' + myClass + ' ')) {
      elements[i].className += ' ' + myClass;
    }
  }
}

Klasse l?schen:

function removeClass(elements, myClass) {
  if (!elements) return;
  if (typeof elements === 'string') elements = document.querySelectorAll(elements);
  else if (elements.tagName) elements = [elements];
  const reg = new RegExp('(^| )' + myClass + '($| )', 'g');
  for (let i = 0; i < elements.length; i++) {
    elements[i].className = elements[i].className.replace(reg, ' ');
  }
}

Modernisierungsl?sung: Verwenden Sie

Eigenschaften classList IE10 und über den Browsern unterstützen

Attribute und vereinfachen den Betrieb von Klassen.

classList

Klasse hinzufügen:

function addClass(selector, myClass) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => element.classList.add(myClass));
}

Klasse l?schen:

function removeClass(selector, myClass) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => element.classList.remove(myClass));
}

Zusammenfassung

In diesem Artikel werden Methoden zum Hinzufügen und L?schen von CSS -Klassen mithilfe

und

eingeführt. Durch die Beherrschung dieser F?higkeiten k?nnen Sie leicht dynamische Auswirkungen von Webelementen erzielen und die Benutzererfahrung verbessern. className classList

FAQs (FAQs)

• Zweck, CSS -Klassen mit Vanille -JS hinzuzufügen oder zu entfernen?

  steuert dynamisch das Erscheinungsbild und das Verhalten von HTML -Elementen, z. B. das ?ndern von Stilen als Reaktion auf Benutzeroperationen, Anzeigen/Verstecken von Elementen, Erstellen von Animationseffekten usw.

• Wie füge ich mehrere Klassen mit

  hinzu? übergeben Sie den Klassennamen als unabh?ngiger Parameter: classList.add() element.classList.add("class1", "class2", "class3");

• K?nnen Sie Klassen l?schen, die im Element nicht vorhanden sind?

  Ja, meldet keinen Fehler, führt jedoch keine Operation durch.

• Wie kann ich überprüfen, ob ein Element eine bestimmte Klasse enth?lt? Verwenden Sie die Methode classList.contains(), um einen Booleschen Wert zurückzugeben.

• Wie man Klassen mit mehreren Elementen gleichzeitig manipuliert? Verwenden Sie querySelectorAll(), um Elemente auszuw?hlen, und schleifen Sie dann die Klassen jedes Elements durch und manipulieren Sie sie dann.

• Wie wechsle ich die Klasse eines Elements? Methode classList.toggle() verwenden.

• Der Unterschied zwischen

  className und classList? className ist ein String-Attribut; classList DOMTokenList

• Werden SVG -Elemente unterstützt? Unterstützung. classList

  Wie ist die Browserkompatibilit?t von

• ? moderne Browser werden weit verbreitet und IE9 und unten werden nicht unterstützt. classList

• Kann die

  -Methode in einer Kette aufgerufen werden? Ja. classList

Ich hoffe, dieser Artikel wird Ihnen hilfreich sein!

Das obige ist der detaillierte Inhalt vonSchneller Tipp: Fügen Sie eine CSS -Klasse mit Vanille -JavaScript hinzu oder entfernen Sie sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!