本文翻译自: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");