Schneller Tipp: Fügen Sie eine CSS -Klasse mit Vanille -JavaScript hinzu oder entfernen Sie sie

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!