使用纯 JavaScript 将类添加到元素的另一种方法

添加类：

document.getElementById("div1").classList.add("classToBeAdded");

对于删除类：

document.getElementById("div1").classList.remove("classToBeRemoved");

注意：但不支持 IE <= 9 或 Safari <=5.0

以下 3 个函数在不支持的浏览器中工作classList：

function hasClass(el, className)
{
    if (el.classList)
        return el.classList.contains(className);
    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className)
{
    if (el.classList)
        el.classList.add(className)
    else if (!hasClass(el, className))
        el.className += " " + className;
}

function removeClass(el, className)
{
    if (el.classList)
        el.classList.remove(className)
    else if (hasClass(el, className))
    {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        el.className = el.className.replace(reg, ' ');
    }
}

https://jaketrent.com/post/addremove-classes-raw-javascript/

为了将来的友好性，我推荐使用 polyfill/shim 的 classList：https : //developer.mozilla.org/en-US/docs/Web/API/Element/classList#wrapper

var elem = document.getElementById( 'some-id' );
elem.classList.add('some-class'); // Add class
elem.classList.remove('some-other-class'); // Remove class
elem.classList.toggle('some-other-class'); // Add or remove class
if ( elem.classList.contains('some-third-class') ) { // Check for class
    console.log('yep!');
}

classList从 IE10 开始可用，如果可以，请使用它。

element.classList.add("something");
element.classList.remove("some-class");

我很困惑，这里没有一个答案突出地提到非常有用的DOMTokenList.prototype.toggle方法，它确实简化了很多代码。

例如，您经常会看到执行此操作的代码：

if (element.classList.contains(className) {
  element.classList.remove(className)
} else {
  element.classList.add(className)
}

这可以用一个简单的调用来代替

element.classList.toggle(className)

在许多情况下也非常有用，如果您根据条件添加或删除类名，则可以将该条件作为第二个参数传递。如果该参数为真，则toggle表现为add，如果为假，则表现为好像您调用了remove。

element.classList.toggle(className, condition) // add if condition truthy, otherwise remove