CSS-Klasse mit JavaScript aus einem Element entfernen (ohne jQuery)

Question

Kann mir jemand sagen, wie ich eine Klasse auf einem Element nur mit JavaScript entfernen kann? Bitte geben Sie mir keine Antwort mit jQuery, da ich es nicht verwenden kann und keine Ahnung davon habe.

Answer 1

Editar

Okay, komplett umgeschrieben. Es ist schon eine Weile her, ich habe ein bisschen gelernt und die Kommentare haben mir geholfen.

Node.prototype.hasClass = function (className) {
    if (this.classList) {
        return this.classList.contains(className);
    } else {
        return (-1 < this.className.indexOf(className));
    }
};

Node.prototype.addClass = function (className) {
    if (this.classList) {
        this.classList.add(className);
    } else if (!this.hasClass(className)) {
        var classes = this.className.split(" ");
        classes.push(className);
        this.className = classes.join(" ");
    }
    return this;
};

Node.prototype.removeClass = function (className) {
    if (this.classList) {
        this.classList.remove(className);
    } else {
        var classes = this.className.split(" ");
        classes.splice(classes.indexOf(className), 1);
        this.className = classes.join(" ");
    }
    return this;
};

---

Alte Post

Ich habe gerade mit etwas Ähnlichem gearbeitet. Hier ist eine Lösung, die mir eingefallen ist...

// Some browsers don't have a native trim() function
if(!String.prototype.trim) {
    Object.defineProperty(String.prototype,'trim', {
        value: function() {
            return this.replace(/^\s+|\s+$/g,'');
        },
        writable:false,
        enumerable:false,
        configurable:false
    });
}
// addClass()
// first checks if the class name already exists, if not, it adds the class.
Object.defineProperty(Node.prototype,'addClass', {
    value: function(c) {
        if(this.className.indexOf(c)<0) {
            this.className=this.className+=' '+c;
        }
        return this;
    },
    writable:false,
    enumerable:false,
    configurable:false
});
// removeClass()
// removes the class and cleans up the className value by changing double 
// spacing to single spacing and trimming any leading or trailing spaces
Object.defineProperty(Node.prototype,'removeClass', {
    value: function(c) {
        this.className=this.className.replace(c,'').replace('  ',' ').trim();
        return this;
    },
    writable:false,
    enumerable:false,
    configurable:false
});

Jetzt können Sie anrufen myElement.removeClass('myClass')

oder anketten: myElement.removeClass("oldClass").addClass("newClass");

Answer 2

Es ist ganz einfach, denke ich.

document.getElementById("whatever").classList.remove("className");

Answer 3

Versuchen:

function removeClassName(elem, name){
    var remClass = elem.className;
    var re = new RegExp('(^| )' + name + '( |$)');
    remClass = remClass.replace(re, '$1');
    remClass = remClass.replace(/ $/, '');
    elem.className = remClass;
}

Answer 4

var element = document.getElementById('example_id');
var remove_class = 'example_class';

element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');

Answer 5

Ich verwende dieses JS-Snippet-Code:

Zuerst erreiche ich alle Klassen, dann setze ich je nach Index meiner Zielklasse className = "" .

Target = document.getElementsByClassName("yourClass")[1];
Target.className="";