首页  >  文章  >  web前端  >  如何在纯 JavaScript 中不使用 jQuery 来切换元素的类?

如何在纯 JavaScript 中不使用 jQuery 来切换元素的类?

Susan Sarandon
Susan Sarandon原创
2024-10-21 11:11:29782浏览

How to Toggle an Element's Class without jQuery in Pure JavaScript?

在纯 JavaScript 中切换元素类

问:如何在不使用 jQuery 的情况下在纯 JavaScript 中切换元素的类?

jQuery 的toggleClass 方法提供了一种切换元素类的简单方法。但是如何使用纯 JavaScript 来实现这一点呢?

A:

  1. document.classList.toggle():

    现代浏览器支持 classList.toggle 方法,该方法简化了类操作。例如:

    <code class="js">var menu = document.querySelector('.container-fluid');
    menu.classList.toggle('menu-hidden');</code>
  2. classList.js:

    对于缺少 classList.toggle 的旧浏览器,您可以使用 classList.js polyfill:

    <code class="js">var menu = document.querySelector('.menu');
    classList.toggle(menu, 'hidden-phone');</code>

附加说明:

  • 类列表:使用类名而不是 ID以提高效率。
  • 避免 ID: ID 在 JavaScript 窗口对象中创建全局变量。

以上是如何在纯 JavaScript 中不使用 jQuery 来切换元素的类?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn