如何使用纯 JavaScript 动态切换元素类？

纯 JavaScript 中切换元素类：简化指南

动态修改元素类的任务可以使用纯 JavaScript 来实现。此过程消除了对 jQuery 等额外框架或库的需要。

jQuery 转换：

考虑以下 jQuery 片段：

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

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

纯 JavaScript 实现：

为了在纯 JavaScript 中实现相同的功能，通常使用 classList.toggle() 方法。大多数现代浏览器都支持此方法。

var menu = document.querySelector('.menu');  // Using a class instead of an ID
menu.classList.toggle('hidden-phone');

注意：在 JavaScript 中使用 ID 可能会导致全局泄漏，一般不推荐。

ClassList.js 适用于旧版浏览器：

对于本身不支持 classList.toggle() 的浏览器，您可以合并 classlist.js 填充。

var menu = document.querySelector('.menu');
menu.classList.toggle('hidden-phone');

此实现可靠无需外部库或框架即可切换类，在纯 JavaScript 中提供简洁高效的方法。

以上是如何使用纯 JavaScript 动态切换元素类？的详细内容。更多信息请关注PHP中文网其他相关文章！