wake-up-neo.com

CSS-Klasse aus Element mit JavaScript entfernen (kein jQuery)

Kann mir jemand mitteilen, wie eine Klasse für ein Element nur mit JavaScript entfernt werden kann? Bitte geben Sie mir keine Antwort mit jQuery, da ich es nicht verwenden kann und nichts darüber weiß.

javascripthtmlcss
560
Amra

Die richtige und übliche Vorgehensweise ist die Verwendung von classList. Es ist jetzt weit verbreitet in der neuesten Version der meisten modernen Browser unterstützt :

ELEMENT.classList.remove("CLASS_NAME");

Dokumentation: https://developer.mozilla.org/en/DOM/element.classList

880
Paul Rouget
document.getElementById("MyID").className =
    document.getElementById("MyID").className.replace(/\bMyClass\b/,'');

dabei ist MyID die ID des Elements und MyClass der Name der Klasse, die Sie entfernen möchten.

PDATE: Verwenden Sie zur Unterstützung von Klassennamen, die Bindestrichzeichen enthalten, z. B. "My-Class"

document.getElementById("MyID").className =
  document.getElementById("MyID").className
    .replace(new RegExp('(?:^|\\s)'+ 'My-Class' + '(?:\\s|$)'), ' ');
513
ЯegDwight

Hier ist eine Möglichkeit, diese Funktionalität direkt in alle DOM-Elemente zu integrieren:

HTMLElement.prototype.removeClass = function(remove) {
    var newClassName = "";
    var i;
    var classes = this.className.split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] !== remove) {
            newClassName += classes[i] + " ";
        }
    }
    this.className = newClassName;
}
56
Matthew
function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function removeClass(ele,cls) {
        if (hasClass(ele,cls)) {
            var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
            ele.className=ele.className.replace(reg,' ');
        }
    }
41
Keith Rousseau
div.classList.add("foo");
div.classList.remove("foo");

Mehr unter https://developer.mozilla.org/en-US/docs/Web/API/element.classList

35
joseconstela

Bearbeiten

Okay, komplett neu schreiben. Es ist eine Weile her, ich habe ein bisschen gelernt und die Kommentare haben 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
// 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 myElement.removeClass('myClass') aufrufen

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

27
Duncan

Es ist sehr einfach, denke ich.

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

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;
}
9
scunliffe
var element = document.getElementById('example_id');
var remove_class = 'example_class';

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

Alle diese Antworten sind viel zu kompliziert, versuchen Sie es

var string = "Hello, whats on your mind?";
var new_string = string.replace(', whats on your mind?', '');

Das Ergebnis wäre eine Rückgabe des Strings

Hello

Super einfach. Credits gehen an jondavidjohn Entfernen eines Teils der Zeichenkette in Javascript

2
aaa

Ich benutze diesen JS-Code:

Zuerst erreiche ich alle Klassen, dann setze ich gemäß Index meiner Zielklasse className = "".

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