谁能告诉我如何仅使用 JavaScript 删除元素上的类？请不要用 jQuery 给我答案，因为我无法使用它，而且我对此一无所知。
使用 JavaScript（无 jQuery）从元素中删除 CSS 类
IT技术
javascript
html
css
2021-01-25 06:14:42
6个回答
正确且标准的方法是使用classList. 它现在在大多数现代浏览器的最新版本中得到广泛支持：
ELEMENT.classList.remove("CLASS_NAME");
remove.onclick = () => {
const el = document.querySelector('#el');
if (el.classList.contains("red")) {
el.classList.remove("red");
}
}.red {
background: red
}<div id='el' class="red"> Test</div>
<button id='remove'>Remove Class</button>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;
}
试试这个：
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,' ');
}
}
div.classList.add("foo");
div.classList.remove("foo");
更多信息请访问https://developer.mozilla.org/en-US/docs/Web/API/element.classList
其它你可能感兴趣的问题