在前端开发中，经常需要通过JavaScript来操作DOM元素。有时候我们需要隐藏页面中指定class的元素，本文将介绍如何使用纯JavaScript实现这一功能。
为什么要隐藏元素？
在实际项目中，我们可能需要根据用户的行为、权限等因素来动态地显示或隐藏某些元素。例如，在登录状态下，我们需要隐藏“登录”按钮，显示“退出登录”按钮；在普通用户身份下，我们需要隐藏一些管理员才能看到的功能按钮等。
因此，掌握如何隐藏指定class的元素是非常重要的。
隐藏元素的方法
方法一：修改样式（display）
最简单的方法是通过修改元素的CSS属性来实现隐藏。其中，最常用的属性是display，取值为none时，元素将不可见。
-- --------------------- --- -------- - --------------------------------------- -- --------------------- ---- --- ---- - - -- - - ---------------- ---- - ------------------------- - ------- -
上述代码中，我们使用了querySelectorAll方法获取所有class为my-class的元素，并通过循环遍历每个元素并设置其样式为display: none，达到隐藏元素的效果。
但是，这种方式会直接修改元素的样式，如果后续需要再次显示元素，可能会遇到一些问题。因此，我们推荐使用第二种方法。
方法二：修改类名（classList）
在HTML中，我们可以为元素设置多个class，通过JavaScript的classList方法，我们可以动态地增加或删除元素的class，从而达到修改元素样式的目的。
-- --------------------- --- -------- - --------------------------------------- -- -------------------- --- ---- - - -- - - ---------------- ---- - ----------------------------------------- -
上述代码中，我们使用了querySelectorAll方法获取所有class为my-class的元素，并通过循环遍历每个元素并移除其my-class类，达到隐藏元素的效果。
这种方式不会直接修改元素的样式，而是通过增加或删除类名来实现，方便后续再次显示元素。
示例代码
下面是完整的示例代码：
--------- -----
------
------
----------- ------- -- ----- -- ---- ------------------
-------
------
------- ------------------------
------- ------------------------
------- ------------------------
------- ------------------------
--------
--- ------- - -----------------------------------
--------------------------------- ---------- -
-- ----------------
--- -------- - ----------------------------------
-- ---------------
--- ---- - - -- - - ---------------- ---- -
------------------------------------
-
---
---------
-------
-------以上代码中，我们为三个按钮设置了相同的class——btn，点击页面中的“隐藏”按钮后，三个按钮将隐藏。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29462