使用JavaScript（无jQuery）从元素中删除CSS类[重复]

本文翻译自：Remove CSS class from element with JavaScript (no jQuery) [duplicate]

This question already has an answer here: 这个问题在这里已有答案：

• How to change an element's class with JavaScript? 如何用JavaScript更改元素的类？ 30 answers 30个答案

Could anyone let me know how to remove a class on an element using JavaScript only? 任何人都可以告诉我如何使用JavaScript删除元素上的类吗？ Please do not give me an answer with jQuery as I can't use it, and I don't know anything about it. 请不要给我一个jQuery的答案，因为我不能使用它，我对此一无所知。

---

#1楼

参考：https://stackoom.com/question/92nx/使用JavaScript-无jQuery-从元素中删除CSS类-重复

---

#2楼

There is also $.toggleClass , $.addClass , and $.removeClass . 还有$.toggleClass ， $.addClass和$.removeClass 。 For documentation, take a look at http://api.jquery.com/toggleClass/ . 有关文档，请查看http://api.jquery.com/toggleClass/ 。

Take a look at this jsFiddle example to see it in action. 看看这个jsFiddle示例 ，看看它的实际效果。

---

#3楼

div.classList.add("foo");
div.classList.remove("foo");

More at https://developer.mozilla.org/en-US/docs/Web/API/element.classList 更多信息， 请访问https://developer.mozilla.org/en-US/docs/Web/API/element.classList

---

#4楼

All of these answers are way too complicated, try 所有这些答案都太复杂了，试试吧

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

The result would be a return of the string 结果将是字符串的返回

Hello

Super easy. 超级容易。 Credits go to jondavidjohn Remove portion of string in Javascript 积分转到jondavidjohn 在Javascript中删除字符串的一部分

---

#5楼

我想这很简单。

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

---

#6楼

Edit 编辑

Okay, complete re-write. 好的，完全重写。 It's been a while, I've learned a bit and the comments have helped. 已经有一段时间了，我已经学到了一点，这些评论也有所帮助。

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

---

Old Post 老邮政

---

I was just working with something like this. 我只是在做这样的事情。 Here's a solution I came up with... 这是我提出的解决方案......

 // 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 }); 

Now you can call myElement.removeClass('myClass') 现在你可以调用myElement.removeClass('myClass')

or chain it: myElement.removeClass("oldClass").addClass("newClass"); 或链接： myElement.removeClass("oldClass").addClass("newClass");