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

Question

我正在寻找一种快速安全的方法来在没有 jQuery 的情况下从 html 元素中添加和删除类。

它也应该在早期的 IE（IE8 及更高版本）中工作。

原文由 Peter Eberle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Dan Bray 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

添加类：

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

对于删除类：

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

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

原文由 Shoaib Chikate 发布，翻译遵循 CC BY-SA 3.0 许可协议