Wie ändere ich die Klasse eines Elements mit JavaScript?

So ändern Sie die Klasse eines Elements mit JavaScript

JavaScript reagiert auf verschiedene Ereignisse wie onclick und bietet verschiedene Techniken zum Ändern der Klasse eines HTML-Elements.

Moderne HTML5-Techniken

Für moderne Browser das Wenn Sie classList unterstützen, bieten die folgenden Methoden einen einfachen Ansatz:

• document.getElementById("MyElement").classList.add('MyClass');
• document.getElementById("MyElement ").classList.remove('MyClass');
• if (document.getElementById("MyElement").classList.contains('MyClass'))
• document.getElementById("MyElement").classList.toggle('MyClass');

Browserübergreifende Lösungen

Für breitere Browser Kompatibilität:

So ändern Sie alle Klassen

• document.getElementById("MyElement").className = "MyClass";

Um ein hinzuzufügen Klasse

• document.getElementById("MyElement").className = " MyClass";

So entfernen Sie eine Klasse

• document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|s)MyClass(?!S)/g , '')

Um zu prüfen, ob eine Klasse wird angewendet

• wenn (document.getElementById("MyElement").className.match(/(?:^|s)MyClass(?!S)/))

Zuweisen von Aktionen zu onClick-Ereignissen

Um HTML und JavaScript zu trennen, wird die Verwendung empfohlen Funktionen:

• HTML

  <button onClick="changeClass()">My Button</button>

• JavaScript

  function changeClass() {
    // Code examples from above
  }

Alternativ mit addEventListener:

window.onload = function() {
    document.getElementById("MyElement").addEventListener('click', changeClass);
}

JavaScript Frameworks und Bibliotheken

Bibliotheken wie jQuery vereinfachen diese Aufgaben:

• Zu ändern Klassen

  $('#MyElement').addClass('MyClass');
  $('#MyElement').removeClass('MyClass');
  if ($('#MyElement').hasClass('MyClass'))

• Verknüpfung zum Hinzufügen/Entfernen einer Klasse

  $('#MyElement').toggleClass('MyClass');

• Weisen Sie dem Klickereignis eine Funktion zu

  $('#MyElement').click(changeClass);

Das obige ist der detaillierte Inhalt vonWie ändere ich die Klasse eines Elements mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!