在网页开发过程中，我们经常需要通过javascript来改变样式。其中一个经常用到的场景是改变一个元素的可见性。在css中，可以使用display属性来控制一个元素的可见性。在javascript中，我们可以使用dom来访问和修改元素的样式，从而达到控制元素可见性的目的。
一、display属性
display属性用于控制一个元素在文档中的显示方式。其值可以为以下几种：
- none：元素不被渲染，即不显示在文档中。
- block：元素被渲染为块级元素，即元素会占据一整行。
- inline：元素被渲染为行内元素，即元素不会占据一整行，而是在一行内显示。
- inline-block：元素被渲染为行内块级元素，即元素会在一行内显示，并且可以设置宽度、高度、边框等样式。
- table、table-row、table-cell：元素被渲染为表格相关的元素。table将元素渲染为表格，table-row将元素渲染为表格行，table-cell将元素渲染为表格单元格。
- flex、inline-flex：元素被渲染为flex容器，可用于实现响应式布局等场景。
二、JavaScript操作display属性
在JavaScript中，我们可以通过DOM来获取和修改一个元素的display属性。首先，我们需要通过document对象的getElementById()方法获取需要操作的元素。该方法需要传入需要获取的元素ID，例如：
立即学习“前端免费学习笔记（深入）”；
var myDiv = document.getElementById('myDiv');上述代码将获取ID为"myDiv"的元素并将其赋值给变量myDiv。接着，我们可以通过style属性来访问元素的样式属性。例如，可以使用以下代码将元素的display属性设置为none，从而使元素在页面上不显示：
myDiv.style.display = 'none';
我们也可以通过判断元素的display属性来进行元素的显示和隐藏。例如，以下代码可以让元素如果原本是隐藏的，则设置其display属性为block，从而显示元素：
一款多用途的企业软件前端HTML模板。IT软件服务公司网站响应式单页模板。基于CSS、JS、HTML模块化原则创建的。如果您的站点不需要所有元素，那么可以轻松地删除不必要的组件。模板的代码干净，友好，注释良好。这使得编辑和自定义模板变得很容易。
if (myDiv.style.display === 'none') {
myDiv.style.display = 'block';
}如果元素原本是显示的，则可以将其display属性设置为none，从而隐藏元素：
if (myDiv.style.display !== 'none') {
myDiv.style.display = 'none';
}三、应用场景
- 隐藏和显示弹出层
在网页开发中，经常需要使用弹出层来展示更多的内容或者进行交互。弹出层通常需要在用户点击某一个按钮或链接时触发，并在用户点击“关闭”按钮时关闭。为实现这一功能，我们可以使用JavaScript来修改弹出层的display属性。在弹出层初始状态下，可以将其display属性设置为none，表示不显示在页面中。当用户点击触发弹出层的按钮或链接时，可将弹出层的display属性设置为block，从而显示弹出层。当用户点击弹出层中的“关闭”按钮时，可将弹出层的display属性设置为none，从而关闭弹出层。
- 实现响应式布局
响应式布局是指针对不同设备显示屏幕大小，通过调整布局和样式来适应不同的显示屏幕大小。在实现响应式布局时，我们通常需要根据屏幕大小来调整某些元素的显示方式和位置。其中，display属性可以用于控制元素的显示方式，从而实现响应式布局。例如，在一个典型的导航栏中，我们希望在屏幕宽度小于某一阈值时将导航栏的项显示为水平排列，而在屏幕宽度大于该阈值时则显示为垂直排列。通过改变导航栏中各项的display属性，就可以实现这一响应式布局。
- 根据用户行为控制元素可见性
有些场景下，我们希望根据用户的行为来控制某个元素的可见性。例如，当用户在搜索框中输入了关键词后，我们希望展示搜索结果栏目。此时，可以通过监听搜索框的输入事件，当用户输入关键词时，将搜索结果栏目的display属性设置为block，从而显示搜索结果。如果用户清除了关键词，可以将搜索结果栏目的display属性设置为none，从而隐藏搜索结果。
四、总结
通过修改元素的display属性，我们可以控制元素的可见性，并实现多种Web开发场景。在实现这些场景时，我们需要通过JavaScript来获取和修改元素的样式属性。掌握这一技术，可以帮助我们更好地完成Web开发中的各种任务。
