在前端开发中，动态更改页面元素的显示状态是非常重要的一项技能。其中最常见的操作之一就是更改 div 元素的显示和隐藏。 在这篇文章中，我们将介绍如何使用 JavaScript 来实现这一目标。
显示和隐藏 div 元素
首先，让我们来了解如何显示和隐藏一个 div 元素。可以通过设置 display 样式属性为 none 来隐藏一个 div 元素，反之则将其设置为其他值，如 block 或 flex 等来显示。
---- --------------------------
------- -------------------------------
------- -------------------------------
--------
-------- ------ -
---------------------------------------------- - --------
-
-------- ------ -
---------------------------------------------- - -------
-
---------在上面的示例代码中，我们定义了两个按钮，分别用于显示和隐藏名为 myDiv 的 div 元素。当单击“显示div”按钮时，myDiv 元素的样式将被设置为 display:block，从而使其可见。当单击“隐藏div”按钮时，myDiv 元素的样式将被设置为 display:none，从而使其消失。
切换 div 元素的显示状态
除了直接更改 display 样式属性，您还可以使用 toggle() 函数来切换 div 元素的显示状态。这个函数会自动检测当前 display 属性值，并根据需要将其设置为 none 或其他值。
---- --------------------------
------- -----------------------------------
--------
-------- -------- -
--------------------------------------------------------
-
---------在上面的示例中，我们定义了一个按钮用于切换 myDiv 元素的显示状态。当单击按钮时，toggle() 函数将被调用，并将自动更改 myDiv 元素的显示状态。
总结
在本文中，我们介绍了如何使用JavaScript来更改 div 元素的显示和隐藏，以及如何使用 toggle() 函数来切换其显示状态。这些技巧在实际开发中非常有用，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/14651