如何在纯JavaScript中切换元素的类？

javascript dom toggle

2022-08-30 02:28:07

我正在寻找一种方法将此jQuery代码（用于响应式菜单部分）转换为纯JavaScript。

如果很难实现，可以使用其他JavaScript框架。

$('.btn-navbar').click(function()
{
    $('.container-fluid:first').toggleClass('menu-hidden');
    $('#menu').toggleClass('hidden-phone');

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});

答案 1

2014年答案：classList.toggle（）是大多数浏览器支持的标准和支持。

较旧的浏览器可以使用classlist.js用于classList.toggle（）：

var menu = document.querySelector('.menu') // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');

顺便说一句，你不应该使用ID（它们将全局变量泄漏到JS窗口对象中）。

答案 2

以下是使用 ES6 实现的解决方案

const toggleClass = (el, className) => el.classList.toggle(className);

使用示例

toggleClass(document.querySelector('div.active'), 'active'); // The div container will not have the 'active' class anymore