用纯JavaScript隐藏指定class的元素

阅读时长 4 分钟读完

在前端开发中,经常需要通过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

纠错
反馈