Wie kann man einem bestimmten Element eine Klasse hinzufügen?

Question

Ich habe ein Element, das bereits eine Klasse hat:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Nun möchte ich eine JavaScript-Funktion erstellen, die eine Klasse zu der div (nicht ersetzen, sondern hinzufügen).

Wie kann ich das tun?

Answer 1

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";

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).

Answer 2

Wenn Sie jQuery nicht verwenden möchten und ältere Browser unterstützen wollen:

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}

Answer 3

Ich denke auch, dass der schnellste Weg ist, Element.prototype.classList wie in es5 zu verwenden: document.querySelector(".my.super-class").classList.add('new-class') aber in ie8 gibt es nicht so etwas wie Element.prototype.classList, trotzdem können Sie polyfill es mit diesem Schnipsel (fühlte sich frei zu bearbeiten und zu verbessern):

if(Element.prototype.classList === void 0){
    function DOMTokenList(classes, self){
        typeof classes == "string" && (classes = classes.split(' '))
        while(this.length){
            Array.prototype.pop.apply(this);
        }
        Array.prototype.push.apply(this, classes);
        this.__self__ = this.__self__ || self
    }

    DOMTokenList.prototype.item = function (index){
        return this[index];
    }

    DOMTokenList.prototype.contains = function (myClass){
        for(var i = this.length - 1; i >= 0 ; i--){
            if(this[i] === myClass){
                return true;
            }
        }
        return false
    }

    DOMTokenList.prototype.add = function (newClass){
        if(this.contains(newClass)){
            return;
        }
        this.__self__.className += (this.__self__.className?" ":"")+newClass;
        DOMTokenList.call(this, this.__self__.className)
    }

    DOMTokenList.prototype.remove = function (oldClass){
        if(!this.contains(newClass)){
            return;
        }
        this[this.indexOf(oldClass)] = undefined
        this.__self__.className = this.join(' ').replace(/  +/, ' ')
        DOMTokenList.call(this, this.__self__.className)
    }

    DOMTokenList.prototype.toggle = function (aClass){
        this[this.contains(aClass)? 'remove' : 'add'](aClass)
        return this.contains(aClass);
    }

    DOMTokenList.prototype.replace = function (oldClass, newClass){
        this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
    }

    Object.defineProperty(Element.prototype, 'classList', {
        get: function() {
            return new DOMTokenList( this.className, this );
        },
        enumerable: false
    })
}

Answer 4

Hinzufügen, Entfernen oder Überprüfen von Elementklassen auf einfache Weise:

var uclass = {
    exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
    add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
    remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/  /g,' ');elem.className = c;}
};

var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');

Answer 5

Sie können einen modernen Ansatz ähnlich wie jQuery verwenden

Wenn Sie nur ein Element ändern müssen, das erste, das JS im DOM findet, können Sie dies verwenden:

document.querySelector('.someclass').className += " red";

.red {
  color: red;
}

<div class="someclass">
  <p>This method will add class "red" only to first element in DOM</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

Denken Sie daran, eine Lücke zu lassen avant Klassenname.

Wenn Sie mehrere Klassen haben, zu denen Sie eine neue Klasse hinzufügen möchten, können Sie dies wie folgt tun

document.querySelectorAll('.someclass').forEach(function(element) {
  element.className += " red";
});

.red {
  color: red;
}

<div class="someclass">
  <p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>