在前端开发中，有时需要通过JavaScript控制元素的显示和隐藏，本文将介绍如何使用JavaScript使一个 div 元素可见或不可见。
1. 使用CSS样式实现可见和不可见
首先，我们可以使用CSS样式来控制元素的可见性。通过设置 display 属性为 none 可以将元素隐藏起来，而将其设置为 block 或其他值则可以将其显示出来。
------ - -------- ----- -
对应的HTML代码如下：
---- ----------- ------ ------
这样，当页面加载时，该 div 元素就会被隐藏起来。如果想要让它再次显示出来，可以通过JavaScript来修改其CSS样式。
2. 使用JavaScript实现可见和不可见
2.1 显示一个隐藏的div
通过修改CSS样式来显示一个隐藏的 div 元素非常简单。我们只需要获取该元素的引用，然后将其 display 属性设置为 block 或其他合适的值即可。
----- ----- - --------------------------------- ------------------- - --------
上面的代码获取了ID为 myDiv 的元素，并将其 display 属性设置为 block。这样，该元素就会显示出来了。
2.2 隐藏一个可见的div
同样地，我们也可以通过修改CSS样式来隐藏一个可见的 div 元素。只需要将其 display 属性设置为 none 即可。
----- ----- - --------------------------------- ------------------- - -------
这样就能够将元素隐藏起来了。需要注意的是，这种方法只是在页面上隐藏了该元素，但它仍然存在于DOM中，因此在JavaScript中仍然可以访问和操作它。
2.3 切换可见性
如果想要在点击某个按钮或触发某个事件时切换一个 div 元素的可见性，可以使用以下代码：
----- -------- - ------------------------------------
----- ----- - ---------------------------------
---------------------------------- -- -- -
-- -------------------- --- ------- -
------------------- - --------
- ---- -
------------------- - -------
-
---上面的代码会在点击ID为 myButton 的按钮时，判断当前 myDiv 元素的可见状态，并将其状态取反。
3. 总结
本文介绍了如何使用CSS样式和JavaScript控制一个 div 元素的可见性。使用CSS样式可以在页面加载时就实现元素的隐藏，而使用JavaScript则可以在运行时动态地改变元素的可见性。希望这篇文章能够对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11654