css 元素显示隐藏的9种思路

下面我来给你讲解一下“CSS元素显示隐藏的9种思路”的完整攻略。

1. 使用 display 属性

可以使用 display 属性来控制元素的显示和隐藏。可以设置为以下几个值：

• none: 隐藏元素，元素不占用空间。
• block: 显示元素，元素占用一行。
• inline: 显示元素，元素不独占一行，与相邻元素共处一行。
• inline-block: 显示元素，元素不独占一行，但是可以设置宽高。

示例

HTML代码：

<div id="elem" style="display: none;">这是一个隐藏的元素。</div>
<button onclick="document.getElementById('elem').style.display='block'">显示元素</button>
<button onclick="document.getElementById('elem').style.display='none'">隐藏元素</button>

演示效果：点击这里

2. 使用 visibility 属性

visibility 属性也可以控制元素的显示和隐藏。但是它隐藏的元素仍然占据空间。

示例

HTML代码：

<div id="elem" style="visibility: hidden;">这是一个隐藏的元素。</div>
<button onclick="document.getElementById('elem').style.visibility='visible'">显示元素</button>
<button onclick="document.getElementById('elem').style.visibility='hidden'">隐藏元素</button>

演示效果：点击这里

3. 使用 opacity 属性

可以使用 opacity 属性来控制元素的透明度，从而达到显示和隐藏的效果。当 opacity 的值为 0 时，元素完全透明，相当于隐藏。

示例

HTML代码：

<div id="elem" style="opacity: 0;">这是一个隐藏的元素。</div>
<button onclick="document.getElementById('elem').style.opacity='1'">显示元素</button>
<button onclick="document.getElementById('elem').style.opacity='0'">隐藏元素</button>

演示效果：点击这里

4. 使用 position 属性

使用 position 属性可以将元素放到一个不合适的位置，达到隐藏的效果。

示例

HTML代码：

<div id="elem" style="position: absolute; left: -9999px;">这是一个隐藏的元素。</div>
<button onclick="document.getElementById('elem').style.left='0'">显示元素</button>
<button onclick="document.getElementById('elem').style.left='-9999px'">隐藏元素</button>

演示效果：点击这里

5. 使用 clip 属性

使用 clip 属性可以将元素剪切，在视觉上达到隐藏的效果。

示例

HTML代码：

<div id="elem" style="position: absolute; clip: rect(0, 0, 0, 0);">这是一个隐藏的元素。</div>
<button onclick="document.getElementById('elem').style.clip='auto'">显示元素</button>
<button onclick="document.getElementById('elem').style.clip='rect(0, 0, 0, 0)'">隐藏元素</button>

演示效果：点击这里

6. 使用 height 和 width 属性

使用 height 和 width 属性可以将元素的高度和宽度设置为 0，达到隐藏的效果。

示例

HTML代码：

<div id="elem" style="height: 0px; width: 0px;">这是一个隐藏的元素。</div>
<button onclick="document.getElementById('elem').style.height='100px'; document.getElementById('elem').style.width='100px'">显示元素</button>
<button onclick="document.getElementById('elem').style.height='0px'; document.getElementById('elem').style.width='0px'">隐藏元素</button>

演示效果：点击这里

7. 使用 overflow 属性

使用 overflow 属性可以将元素的内容溢出部分隐藏。

示例

HTML代码：

<div id="elem" style="overflow: hidden;">这是一个隐藏的元素。</div>
<button onclick="document.getElementById('elem').style.overflow='auto'">显示元素</button>
<button onclick="document.getElementById('elem').style.overflow='hidden'">隐藏元素</button>

演示效果：点击这里

8. 使用 z-index 属性

使用 z-index 属性可以设置元素的层级，将元素置于其他元素之下或之上，达到隐藏的效果。

示例

HTML代码：

<div id="elem1" style="z-index: 1;">这是一个在上层的元素。</div>
<div id="elem2" style="z-index: 0;">这是一个在下层的元素。</div>
<button onclick="document.getElementById('elem1').style.zIndex='0'; document.getElementById('elem2').style.zIndex='1'">显示elem2</button>
<button onclick="document.getElementById('elem1').style.zIndex='1'; document.getElementById('elem2').style.zIndex='0'">隐藏elem2</button>

演示效果：点击这里

9. 使用 pointer-events 属性

使用 pointer-events 属性可以设置元素的鼠标事件是否发生。当设置为 none 时，元素的鼠标事件不会触发。

示例

HTML代码：

<div id="elem" style="pointer-events: none;">这是一个隐藏的元素。</div>
<button onclick="document.getElementById('elem').style.pointerEvents='auto'">显示元素</button>
<button onclick="document.getElementById('elem').style.pointerEvents='none'">隐藏元素</button>

演示效果：点击这里

这就是“CSS元素显示隐藏的9种思路”的完整攻略，希望对你有所帮助。