css怎么实现元素显示和隐藏

css 是一种用于网页设计的语言，它可以提高网页的可读性和交互性，同时也使得网页元素的表现形式更加丰富。其中，css 的显示和隐藏功能更是网页设计过程中常见的需求。本文将详细介绍在 css 中如何实现元素的显示和隐藏功能。

一、使用display属性

CSS 的 display 属性可以控制元素的显示方式，常见的属性值有 block、none、inline、inline-block 等。其中，none 属性值可以实现元素的隐藏，在此属性值下，元素不会在网页上显示。

比如以下代码可以实现单击按钮显示和隐藏段落：

HTML 代码：

立即学习“前端免费学习笔记（深入）”；

<button onclick="hide()">隐藏段落</button>
<p id="hide-me">这是一段话。</p>

CSS 代码：

#hide-me {
  display: block;
}

JavaScript 代码：

function hide() {
    var para = document.getElementById("hide-me");
    para.style.display = "none";
}

在以上代码中，当单击按钮时，JavaScript 代码会获取 ID 为“hide-me”的段落元素，然后通过修改其 display 属性，达到隐藏元素的效果。

二、使用visibility属性

CSS 的 visibility 属性可以控制元素在页面上的可见性，常见的属性值有 visible、hidden、collapse。其中，hidden 属性值可以实现元素的隐藏，在此属性值下，元素仍会在网页上占据空间。

比如以下代码可以实现单击按钮显示和隐藏段落：

HTML 代码：

立即学习“前端免费学习笔记（深入）”；

<button onclick="hide()">隐藏段落</button>
<p id="hide-me">这是一段话。</p>

CSS 代码：

#hide-me {
  visibility: visible;
}

JavaScript 代码：

function hide() {
    var para = document.getElementById("hide-me");
    para.style.visibility = "hidden";
}

在以上代码中，当单击按钮时，JavaScript 代码会获取 ID 为“hide-me”的段落元素，然后通过修改其 visibility 属性，达到隐藏元素的效果。

三、使用opacity属性

CSS 的 opacity 属性可以控制元素的透明度，常见的属性值为从 0 到 1 的数字，表示元素的不透明度。其中，0 表示完全透明，1 表示不透明。通过设置元素的 opacity 属性为 0，我们也可以实现元素的隐藏效果。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

比如以下代码可以实现单击按钮显示和隐藏段落：

HTML 代码：

立即学习“前端免费学习笔记（深入）”；

<button onclick="hide()">隐藏段落</button>
<p id="hide-me">这是一段话。</p>

CSS 代码：

#hide-me {
  opacity: 1;
}

JavaScript 代码：

function hide() {
    var para = document.getElementById("hide-me");
    para.style.opacity = "0";
}

在以上代码中，当单击按钮时，JavaScript 代码会获取 ID 为“hide-me”的段落元素，然后通过修改其 opacity 属性，达到隐藏元素的效果。

四、使用z-index属性

在某些情况下，我们需要用到叠放顺序来控制元素的隐藏和显示。CSS 的 z-index 属性可以通过设置元素的层级，控制其在页面中的叠放顺序，然后通过调整不同元素的 z-index 属性值，可以实现隐藏和显示效果。

比如以下代码可以实现单击按钮显示和隐藏段落：

HTML 代码：

立即学习“前端免费学习笔记（深入）”；

<button onclick="hide()">隐藏段落</button>
<p id="hide-me" style="position: absolute; top: 50px; left: 50px; z-index: 1;">这是一段话。</p>

CSS 代码：

JavaScript 代码：

function hide() {
    var para = document.getElementById("hide-me");
    para.style.zIndex = "-1";
}

在以上代码中，当单击按钮时，JavaScript 代码会获取 ID 为“hide-me”的段落元素，然后通过修改其 z-index 属性，达到隐藏元素的效果。

总结

CSS 中的显示和隐藏功能非常常用，它可以帮助我们控制网页中各种元素的显示和隐藏。通过使用 display、visibility、opacity 和 z-index 属性，我们可以轻松地实现所需效果，并让网页设计更加灵活和多样化。

以上就是css怎么实现元素显示和隐藏的详细内容，更多请关注php中文网其它相关文章！