关于html：使用JavaScript从元素中删除CSS类(没有jQuery)


Remove CSS class from element with JavaScript (no jQuery)

本问题已经有最佳答案，请猛点这里访问。

任何人都可以告诉我如何使用JavaScript删除元素上的类吗？
请不要给我一个jQuery的答案，因为我不能使用它，我对此一无所知。

相关讨论

正确和标准的方法是使用classList。它现在在大多数现代浏览器的最新版本中得到广泛支持：

1
ELEMENT.classList.remove("CLASS_NAME");

文档：https：//developer.mozilla.org/en/DOM/element.classList

相关讨论

1
2
document.getElementById("MyID").className =
    document.getElementById("MyID").className.replace(/\bMyClass\b/,'');

其中MyID是元素的ID，MyClass是您要删除的类的名称。

更新：
要支持包含短划线字符的类名，例如"My-Class"，请使用

1
2
3
document.getElementById("MyID").className =
  document.getElementById("MyID").className
    .replace(new RegExp('(?:^|\\s)'+ 'My-Class' + '(?:\\s|$)'), ' ');
相关讨论

这是一种将此功能直接烘焙到所有DOM元素中的方法：

1
2
3
4
5
6
7
8
9
10
11
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;
}
相关讨论

1
2
3
4
5
6
7
8
9
10
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,' ');
        }
    }
相关讨论

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

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

相关讨论

编辑

好的，完全重写。
已经有一段时间了，我已经学到了一点，这些评论也有所帮助。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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;
};

老邮政

我只是在做这样的事情。这是我提出的解决方案......

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 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");

相关讨论

我想这很简单。

1
document.getElementById("whatever").classList.remove("className");
相关讨论

尝试：

1
2
3
4
5
6
7
function removeClassName(elem, name){
    var remClass = elem.className;
    var re = new RegExp('(^| )' + name + '( |$)');
    remClass = remClass.replace(re, '$1');
    remClass = remClass.replace(/ $/, '');
    elem.className = remClass;
}
1
2
3
4
var element = document.getElementById('example_id');
var remove_class = 'example_class';

element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');

所有这些答案都太复杂了，试试吧

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

结果将是字符串的返回

1
Hello

超级容易。积分转到jondavidjohn在Javascript中删除字符串的一部分

相关讨论

我使用这个JS代码段代码：

首先，我根据目标类的索引到达所有类，我设置className ="。

1
2
Target = document.getElementsByClassName("yourClass")[1];
Target.className="";
相关讨论

还有$.toggleClass，$.addClass和$.removeClass。有关文档，请查看http://api.jquery.com/toggleClass/。

看看这个jsFiddle示例，看看它的实际效果。

相关讨论

1
document.getElementById("whatever").className +="classToKeep";

使用加号('+')附加类而不是覆盖任何现有类

相关讨论