Wie kann ich Elementklassen mithilfe von JavaScript effizient ändern?

So ändern Sie Elementklassen mithilfe von JavaScript-Ereignissen

Moderne HTML5-Techniken

Moderne Browser unterstützen die classList-Eigenschaft, die Methoden zum Bearbeiten von Klassen bereitstellt:

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');

Einfache Cross-Browser-Lösung

Alles ändern Klassen:

Verwenden Sie den Klassennamen, um alle Klassen festzulegen:

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

Hinzufügen einer zusätzlichen Klasse:

Fügen Sie ein Leerzeichen und die neue Klasse hinzu:

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

Entfernen einer Klasse:

Verwenden Sie einen regulären Ausdruck ersetzen:

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

Nach einer Klasse suchen:

Verwenden Sie denselben regulären Ausdruck für die Überprüfung:

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

Zuweisen von Aktionen zu onClick-Ereignissen

Vermeiden Verwendung von Inline-JavaScript in HTML-Attributen. Erstellen Sie stattdessen eine Funktion und rufen Sie sie im onClick-Attribut auf:

<script>
  function changeClass() {
    // Action code
  }
</script>
<button onClick="changeClass()">My Button</button>

Oder mit addEventListener:

<script>
  window.onload = function() {
    document.getElementById("MyElement").addEventListener('click', changeClass);
  }
</script>
<button>

JavaScript Frameworks und Bibliotheken

jQuery-Beispiele

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

Eine Klasse umschalten:

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

Zuweisen ein Klickereignis:

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

Das obige ist der detaillierte Inhalt vonWie kann ich Elementklassen mithilfe von JavaScript effizient ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!