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

Question

Wie kann ich die Klasse eines HTML-Elements als Reaktion auf eine onclick oder andere Ereignisse mit JavaScript?

Answer 1

Moderne HTML5-Techniken für den Klassenwechsel

Moderne Browser haben die classList die Methoden zur Verfügung stellt, die es einfacher machen, Klassen zu manipulieren, ohne eine Bibliothek zu benötigen:

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

Leider funktionieren diese nicht im Internet Explorer vor v10, obwohl es eine Unterlegscheibe um die Unterstützung für IE8 und IE9 hinzuzufügen, erhältlich bei diese Seite . Es wird jedoch immer mehr zu einer unterstützt .

Einfache Cross-Browser-Lösung

Die Standard-JavaScript-Methode zur Auswahl eines Elements ist die Verwendung von document.getElementById("Id") Sie können die Elemente natürlich auch auf andere Weise erhalten, und in der richtigen Situation können Sie einfach this Dies würde jedoch den Rahmen dieser Antwort sprengen, da sie nicht im Detail darauf eingeht.

Um alle Klassen für ein Element zu ändern:

Um alle vorhandenen Klassen durch eine oder mehrere neue Klassen zu ersetzen, setzen Sie das Attribut className:

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

(Sie können eine durch Leerzeichen getrennte Liste verwenden, um mehrere Klassen anzuwenden).

So fügen Sie einem Element eine zusätzliche Klasse hinzu:

Um eine Klasse zu einem Element hinzuzufügen, ohne bestehende Werte zu entfernen/beeinflussen, fügen Sie ein Leerzeichen und den neuen Klassennamen an, etwa so:

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

So entfernen Sie eine Klasse aus einem Element:

Um eine einzelne Klasse aus einem Element zu entfernen, ohne andere potenzielle Klassen zu beeinträchtigen, ist eine einfache Regex-Ersetzung erforderlich:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Eine Erklärung dieser Regex ist wie folgt:

(?:^|\s) # Match the start of the string or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be the end of the string or space)

Le site g weist den Ersetzer an, bei Bedarf zu wiederholen, falls der Klassenname mehrfach hinzugefügt wurde.

Um zu prüfen, ob eine Klasse bereits auf ein Element angewendet wird:

Dieselbe Regex, die oben zum Entfernen einer Klasse verwendet wurde, kann auch zur Prüfung verwendet werden, ob eine bestimmte Klasse existiert:

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

### Zuweisung dieser Aktionen zu Onclick-Ereignissen:

Es ist zwar möglich, JavaScript direkt in die HTML-Ereignisattribute zu schreiben (z. B. onclick="this.className+=' MyClass'" ) ist dieses Verhalten nicht empfehlenswert. Vor allem bei größeren Anwendungen wird durch die Trennung von HTML-Markup und JavaScript-Interaktionslogik ein besser wartbarer Code erreicht.

Der erste Schritt, um dies zu erreichen, ist die Erstellung einer Funktion und der Aufruf der Funktion im onclick-Attribut, zum Beispiel:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

_{<em>(Es ist nicht erforderlich, diesen Code in Skript-Tags einzubinden; dies dient lediglich der Kürze des Beispiels, und es kann sinnvoller sein, das JavaScript in eine eigene Datei aufzunehmen).</em>}

Der zweite Schritt besteht darin, das Onclick-Ereignis aus dem HTML-Code in JavaScript zu verschieben, zum Beispiel mit addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

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

(Beachten Sie, dass der Teil window.onload erforderlich ist, damit der Inhalt dieser Funktion ausgeführt wird après der HTML-Ladevorgang abgeschlossen ist - andernfalls könnte das MyElement nicht existieren, wenn der JavaScript-Code aufgerufen wird, so dass diese Zeile fehlschlagen würde).

JavaScript-Frameworks und -Bibliotheken

Der obige Code ist in Standard-JavaScript, aber es ist üblich, entweder ein Framework oder eine Bibliothek zu verwenden, um häufige Aufgaben zu vereinfachen und von behobenen Fehlern und Randfällen zu profitieren, an die man beim Schreiben des Codes vielleicht nicht denkt.

Während manche Leute es für übertrieben halten, ein ~50 KB großes Framework hinzuzufügen, nur um eine Klasse zu ändern, ist es durchaus eine Überlegung wert, wenn Sie viel mit JavaScript arbeiten oder etwas tun, das ein ungewöhnliches browserübergreifendes Verhalten haben könnte.

(Ganz grob gesagt, ist eine Bibliothek ein Satz von Werkzeugen, die für eine bestimmte Aufgabe entwickelt wurden, während ein Framework im Allgemeinen mehrere Bibliotheken enthält und einen kompletten Satz von Aufgaben erfüllt).

Die obigen Beispiele wurden im Folgenden unter Verwendung folgender Parameter wiedergegeben jQuery , die wahrscheinlich am häufigsten verwendete JavaScript-Bibliothek (obwohl es auch andere gibt, die es wert sind, untersucht zu werden).

(Beachten Sie, dass $ hier ist das jQuery-Objekt).

Ändern von Klassen mit jQuery:

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

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

if ( $('#MyElement').hasClass('MyClass') )

Darüber hinaus bietet jQuery eine Abkürzung für das Hinzufügen einer Klasse, wenn sie nicht zutrifft, oder das Entfernen einer Klasse, die zutrifft:

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

### Zuweisung einer Funktion an ein Klick-Ereignis mit jQuery:

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

oder, ohne dass eine ID benötigt wird:

$(':button:contains(My Button)').click(changeClass);

Answer 2

Sie können es auch einfach tun:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Und um eine Klasse umzuschalten (entfernen, wenn vorhanden, sonst hinzufügen):

document.getElementById('id').classList.toggle('class');

Answer 3

In einem meiner alten Projekte, das jQuery nicht verwendet hat, habe ich die folgenden Funktionen zum Hinzufügen, Entfernen und Überprüfen, ob ein Element eine Klasse hat, erstellt:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!hasClass(ele, cls))
        ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

Wenn ich also zum Beispiel onclick um der Schaltfläche eine Klasse hinzuzufügen, kann ich dies verwenden:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

Mittlerweile wäre es sicher besser, einfach jQuery zu verwenden.

Answer 4

Sie können verwenden node.className etwa so:

document.getElementById('foo').className = 'bar';

Dies sollte funktionieren in Internet Explorer 5.5 und nach oben gemäß PPK .

Answer 5

Wow, ich bin überrascht, dass es hier so viele übertriebene Antworten gibt...

<div class="firstClass" onclick="this.className='secondClass'">