在前端开发中，经常需要动态地对页面元素进行显示或隐藏。其中一个常用的实现方式是通过切换 div 元素的可见性来实现。
实现方式
可以通过 JavaScript 来控制 div 元素的可见性。最简单的实现方式是使用 display 样式属性，其值为 none 表示隐藏，值为 block 表示显示。
以下是一个例子：
--------- -----
------
------
----- ----------------
------------- --- ------------------
-------
------ -
-------- -----
-
--------
--------
-------- ------------------ -
--- ----- - ---------------------------------
-- -------------------- --- ------- -
------------------- - --------
- ---- -
------------------- - -------
-
-
---------
-------
------
------- ----------------------------------- --- -------------------
---- --------------- -- - --- --------------
-------
-------在上面的代码中，当点击“Toggle Div Visibility”按钮时，将会调用 toggleVisibility 函数来切换 #myDiv 元素的可见性。如果 #myDiv 元素当前处于隐藏状态，则将其显示出来；否则，将其隐藏起来。
更好的实现方式
虽然上述实现方式简单易懂，但不够优雅。更好的实现方式是使用 CSS 类来控制元素的可见性。我们先定义一个 CSS 类 .hidden：
------- - -------- ----- -
然后在 HTML 中为需要隐藏的元素添加该类，如下所示：
---- ---------- ------------------- -- - --- --------------
这时，我们只需要通过 JavaScript 来切换 #myDiv 元素的 .hidden 类即可实现切换其可见性：
-------- ------------------ - --- ----- - --------------------------------- --------------------------------- -
上述代码中，我们使用了 classList 属性和 toggle 方法来切换 .hidden 类的状态。
指导意义
以上介绍了两种实现方式，其中第二种更好的方式可以减少 JavaScript 代码量，提高代码的可读性和维护性。此外，对于需要频繁切换可见性的元素，建议采用第二种方式，在样式表中预定义 .hidden 类，并在需要时直接切换该元素的类即可。
希望本文能够帮助读者更好地掌握切换 div 可见性的技巧，并在实际开发中应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28011