[英]Remove CSS class from element with JavaScript (no jQuery) [duplicate]
谁能让我知道如何仅使用 JavaScript 删除元素上的类? 请不要用 jQuery 给我答案,因为我不能使用它,而且我对此一无所知。
正确和标准的方法是使用classList
。 它现在在大多数现代浏览器的最新版本中得到广泛支持:
ELEMENT.classList.remove("CLASS_NAME");
remove.onclick = () => { const el = document.querySelector('#el'); el.classList.remove("red"); }
.red { background: red }
<div id='el' class="red"> Test</div> <button id='remove'>Remove Class</button>
文档: https ://developer.mozilla.org/en/DOM/element.classList
document.getElementById("MyID").className =
document.getElementById("MyID").className.replace(/\bMyClass\b/,'');
其中MyID
是元素的 ID,MyClass 是您要删除的类的名称。
更新:要支持包含破折号字符的类名,例如“My-Class”,请使用
document.getElementById("MyID").className =
document.getElementById("MyID").className
.replace(new RegExp('(?:^|\\s)'+ 'My-Class' + '(?:\\s|$)'), ' ');
这是一种将此功能直接烘焙到所有 DOM 元素中的方法:
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;
}
div.classList.add("foo");
div.classList.remove("foo");
更多在https://developer.mozilla.org/en-US/docs/Web/API/element.classList
尝试这个:
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,' ');
}
}
编辑
好的,完全重写。 已经有一段时间了,我学到了一点,评论也有所帮助。
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;
};
// 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 });
现在您可以调用myElement.removeClass('myClass')
或链接它: myElement.removeClass("oldClass").addClass("newClass");
这很简单,我想。
document.getElementById("whatever").classList.remove("className");
尝试:
function removeClassName(elem, name){
var remClass = elem.className;
var re = new RegExp('(^| )' + name + '( |$)');
remClass = remClass.replace(re, '$1');
remClass = remClass.replace(/ $/, '');
elem.className = remClass;
}
var element = document.getElementById('example_id');
var remove_class = 'example_class';
element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');
所有这些答案都太复杂了,试试吧
var string = "Hello, whats on your mind?";
var new_string = string.replace(', whats on your mind?', '');
结果将是字符串的返回
Hello
超级容易。 积分转到jondavidjohn 在Javascript中删除字符串的一部分
我使用这个 JS 片段代码:
首先,我到达所有类,然后根据我的目标类的索引,我设置className = "" 。
Target = document.getElementsByClassName("yourClass")[1];
Target.className="";
还有$.toggleClass
, $.addClass
和$.removeClass
。 有关文档,请查看http://api.jquery.com/toggleClass/ 。
看看这个jsFiddle示例 ,看看它的实际效果。
document.getElementById("whatever").className += "classToKeep";
使用加号 ('+') 附加类,而不是覆盖任何现有类
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.