div css 显示与隐藏
DIV 是 HTML 中一个常用的标签，用于分割页面并实现布局。而在页面的交互效果中，我们有时需要动态地显示或隐藏某些 DIV 元素。这时，我们可以利用 CSS 的 display 属性来控制 DIV 的可见性。
一、display 属性
display 属性用于控制 HTML 元素的显示方式。它可以取值为以下几种：
- none
设置为 none 时，元素将被隐藏，并且不会在页面内留下任何空间。
立即学习“前端免费学习笔记（深入）”；
- block
设置为 block 时，元素将以块级元素的形式显示，即元素占据一行，并且容器的宽度被填满。
- inline
设置为 inline 时，元素将以行内元素的形式显示，即多个元素可以在同一行显示。
- inline-block
设置为 inline-block 时，元素将以行内块级元素的形式显示，即多个元素可以在同一行显示，并且元素之间有一定的间距。
- table
设置为 table 时，元素将以表格形式显示，并且可以使用表格相关的 CSS 属性来控制元素的布局。
以上这些取值都可以用于 DIV 元素的 display 属性中。
二、基本语法
通过设置 display 属性，我们可以实现 DIV 元素的显示或隐藏。以下是基本的语法：
//显示元素
document.getElementById('example').style.display = 'block';
//隐藏元素
document.getElementById('example').style.display = 'none';以上代码中，我们通过 getElementById 获取 id 为 example 的 DIV 元素，然后通过设置 style.display 属性来控制元素的显示或隐藏。
三、实例演示
下面我们将通过实例演示来说明如何使用 CSS 的 display 属性来控制元素的显示或隐藏。
- 隐藏 DIV 元素
以下是一个 DIV 元素：
Hi,我是DIV元素！
我们可以使用以下代码将这个元素隐藏起来：
document.getElementById('example').style.display = 'none';在这个例子中，我们获取 id 为 example 的 DIV 元素，然后将它的 display 属性设置为 none，从而实现了元素的隐藏。
- 显示 DIV 元素
如果我们希望显示一个之前被隐藏的 DIV 元素，我们可以使用以下代码：
document.getElementById('example').style.display = 'block';这样就可以将之前被隐藏的 DIV 元素重新显示出来了。
- 更改 DIV 元素的显示方式
在前面讲解 display 属性时，我们提到了可以设置块级、行内、行内块级等元素的显示方式。我们同样可以通过这种方式来更改 DIV 元素的显示方式。
比如，我们可以使用以下代码将一个 DIV 元素修改为行内元素：
document.getElementById('example').style.display = 'inline';这样，原本占据一整行的 DIV 元素就会变成跟文本一样排列在行内了。
四、总结
在页面交互效果中，我们经常需要动态地控制元素的显示或隐藏。使用 CSS 的 display 属性可以方便地实现这一功能。通过简单的语法，我们可以控制 DIV 元素的真实存在与否，以及修改它的显示方式。要注意，修改 display 属性也会影响到元素后代的显示方式。
