Wie kann ich Elementklassen in JavaScript dynamisch verwalten?

Wie kann ich die Klasse eines Elements mit JavaScript dynamisch ändern?

Moderne HTML5-Techniken zur Klassenmanipulation

Unterstützung für moderne Browser die classList-Eigenschaft, die praktische Methoden zum Hinzufügen, Entfernen oder Umschalten von Klassen bereitstellt, ohne dass externe Methoden erforderlich sind Bibliotheken:

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

Alle Klassen ändern

Um alle vorhandenen Klassen durch neue zu ersetzen, verwenden Sie className:

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

Eine zusätzliche Klasse hinzufügen

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

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

Überprüfen, ob eine Klasse angewendet wird

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

Ereignisbehandlung

Sie können diese Aktionen onclick oder anderen Ereignissen zuweisen durch:

• Aufrufen einer Funktion im onClick-Attribut:

<button onclick="changeClass()"></button>

• Verwenden von addEventListener in JavaScript:

document.getElementById("MyElement").addEventListener('click', changeClass);

JavaScript Frameworks und Bibliotheken

Frameworks und Bibliotheken vereinfachen diese Aufgaben, wie zum Beispiel jQuery:

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

Das obige ist der detaillierte Inhalt vonWie kann ich Elementklassen in JavaScript dynamisch verwalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!