有人可以让我知道如何删除一个类的元素只使用JavaScript ? 请不要用jQuery给我一个答案,因为我不会用它,我对它一无所知。
试试这个:
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,' ');
}
}
try:
function removeClassName(elem, name){
var remClass = elem.className;
var re = new RegExp('(^| )' + name + '( |$)');
remClass = remClass.replace(re, '$1');
remClass = remClass.replace(/ $/, '');
elem.className = remClass;
}
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|$)'), ' ');
正确和标准的方法是使用classList。现在大多数现代浏览器的最新版本都广泛支持它:
ELEMENT.classList.remove("CLASS_NAME");
删除.点击 =() => { const el = document.querySelector('#el'); el.classList.remove(“red”); } .红色 { 背景:红色 } <div id='el' class=“red”> 测试</div> <按钮 id='删除'>删除类</button>
文档:https://developer.mozilla.org/en/DOM/element.classList
下面是一种将此功能直接烘焙到所有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
Edit
好的,完全重写。 已经有一段时间了,我学到了一些东西,评论也很有帮助。
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");
var element = document.getElementById('example_id');
var remove_class = 'example_class';
element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');
document.getElementById("whatever").className += "classToKeep";
使用加号('+')附加类,而不是覆盖任何现有的类
我使用这个JS片段代码:
首先,我到达所有的类,然后根据我的目标类的索引,我设置className = ""。
Target = document.getElementsByClassName("yourClass")[1];
Target.className="";
推荐文章
- 大写还是小写文档类型?
- 我如何检查如果一个变量是JavaScript字符串?
- 如何检测如果多个键被按下一次使用JavaScript?
- 样式化HTML电子邮件的最佳实践
- 如何通过history. pushstate获得历史变化的通知?
- CSS可以在元素中的每个单词后强制换行吗?
- CSS/HTML:什么是使文本斜体的正确方法?
- 使用jQuery改变输入字段的类型
- 在JavaScript中,什么相当于Java的Thread.sleep() ?
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- 使用jQuery以像素为整数填充或边距值
- CSS div元素-如何显示水平滚动条只?
- 检查是否选择了jQuery选项,如果没有选择默认值
- Next.js React应用中没有定义Window