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

Hier ist meine Version, die voll funktionsfähig ist:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

Verwendung:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

Answer 2

Hier ist eine ToggleClass zum Umschalten/Hinzufügen/Entfernen einer Klasse auf einem Element:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

Siehe das JSFiddle .

Siehe auch meine Antwort aquí zur dynamischen Erstellung einer neuen Klasse.

Answer 3

Ich verwende in meinem Code die folgenden Vanilla-JavaScript-Funktionen. Sie verwenden reguläre Ausdrücke und indexOf aber erfordern keine Anführungszeichen in regulären Ausdrücken.

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

Sie können auch Folgendes verwenden element.classList in modernen Browsern.

Answer 4

Die Frage des Auftraggebers lautete Wie kann ich die Klasse eines Elements mit JavaScript ändern?

Mit modernen Browsern können Sie dies tun mit einer Zeile JavaScript :

document.getElementById('id').classList.replace('span1', 'span2')

Le site classList Attribut liefert eine DOMTokenList, die eine Vielfalt der Methoden . Sie können die classList eines Elements mit einfachen Manipulationen bearbeiten wie add() , entfernen() o ersetzen() . Sie können auch sehr raffiniert vorgehen und die Klassen wie ein Objekt oder eine Karte mit Schlüssel() , Werte() y Einträge() .

Peter Boughton's Antwort ist ein großartiges Programm, aber es ist schon über ein Jahrzehnt alt. Alle modernen Browser unterstützen jetzt DOMTokenList - siehe https://caniuse.com/#search=classList und sogar Internet Explorer 11 unterstützt einige DOMTokenList-Methoden.

Answer 5

---

DIE OPTIONEN.

Hier ein kleines Beispiel für style vs. classList, damit Sie sehen, welche Möglichkeiten Sie haben und wie Sie sie nutzen können classList zu tun, was Sie wollen.

style vs. classList

Der Unterschied zwischen style y classList ist, dass mit style die Sie zu den Stileigenschaften des Elements hinzufügen, aber classList ist eine Art Kontrolle der Klasse(n) des Elements ( add , remove , toggle , contain ), werde ich Ihnen zeigen, wie Sie die add y remove Methode, da dies die beliebtesten sind.

---

Stil Beispiel

Wenn Sie Folgendes hinzufügen möchten margin-top Eigenschaft in ein Element zu integrieren, würden Sie so vorgehen:

// Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.

---

classList Beispiel

Angenommen, wir haben eine <div class="class-a class-b"> In diesem Fall haben wir bereits 2 Klassen zu unserem div-Element hinzugefügt, class-a y class-b und wir wollen kontrollieren, welche Klassen remove und welche Klasse zu add . Dies ist der Ort, an dem classList praktisch wird.

entfernen class-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

Añadir class-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")

---