1、通过javascript操作style属性可直接切换div的display值实现显隐；2、利用css类名结合classlist.toggle()方法利于样式与逻辑分离；3、使用visibility属性可在保留布局空间的前提下隐藏元素；4、绑定按钮点击事件触发切换函数，实现用户交互控制div显示状态。
如果您希望在网页中动态控制某个内容的可见性，可以通过操作HTML中的div元素来实现显示与隐藏的切换。以下是几种常用的方法：
一、使用JavaScript操作style属性
通过直接修改div元素的display样式，可以快速控制其显示或隐藏状态。该方法简单直观，适用于简单的交互场景。
1、为需要切换的div元素设置一个id，例如：id="content"。
2、编写JavaScript函数，判断当前div的display值，然后进行切换。
3、使用document.getElementById('content').style.display获取当前状态，并根据值设为'none'或'block'。
二、通过CSS类切换控制显隐
利用CSS预定义显示和隐藏的类名，再通过JavaScript切换元素的class，从而实现视觉状态的变更。这种方法更利于样式与逻辑分离。
1、在CSS中定义两个类，如.show { display: block; } 和 .hidden { display: none; }。
2、为div设置初始类名，例如class="show"。
3、使用JavaScript的className或classList.toggle()方法切换类名。
三、使用visibility属性控制
visibility属性可以在不改变页面布局的情况下隐藏元素，隐藏后仍保留其占用的空间，适合需要保持排版稳定的场景。
1、获取目标div元素，例如通过document.getElementById('content')。
2、检查其当前visibility值是否为'visible'。
3、将其设置为'hidden'以隐藏，或设回'visible'以显示。
四、结合按钮触发切换事件
通过绑定按钮的点击事件，调用指定函数实现用户交互驱动的div切换，提升用户体验。
1、添加一个button元素，并设置onclick事件指向自定义函数，如toggleDiv()。
2、在函数中获取div元素并判断其当前状态。
3、根据判断结果切换display或visibility属性值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
