如何在没有jquery的情况下在JS中添加和删除类

Question

我正在寻找一种快速安全的方法来在没有jQuery的情况下从html元素中添加和删除类.
它也应该在IE早期(IE8及以上版本)工作.

Answer 1

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

添加课程:

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

删除课程:

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

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

Answer 2

为了将来友好,我推荐使用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!');
}

Answer 3

以下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/

Answer 4

让我感到困惑的是，这里的答案都没有突出地提到这个非常有用的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

Answer 5

要在没有 JQuery 的情况下添加类，只需附加yourClassName到您的元素className

document.documentElement.className += " yourClassName";

要删除类，您可以使用replace()函数

document.documentElement.className.replace(/(?:^|\s)yourClassName(?!\S)/,'');

同样正如@DavidThomas 提到的，new RegExp()如果您想将类名动态传递给替换函数，则需要使用构造函数。

Answer 6

从IE10起可以使用classList，如果可以的话，请使用该类。

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