css显示与隐藏

百变鹏仔 3个月前 (10-30) #前端问答

文章标签 css

css显示与隐藏

CSS（层叠样式表）是一种样式表语言，用于描述网页的样式和排版。在Web开发中，css显示与隐藏功能非常重要，它可以通过控制HTML元素的可见性来实现。本文将介绍css显示与隐藏的实现方法及其应用。

一、基本语法

在CSS中，通过设置元素的display属性来控制其可见性。display属性的值有以下几种：

none: 隐藏元素，不保留空间。
block: 元素显示为块级元素，占用整行空间。
inline: 元素显示为行内元素，占用行内空间。
inline-block: 元素显示为行内块级元素，占用行内空间但可以设置宽高。
table: 元素显示为表格，此时元素的display属性会被设置为table-cell，而table-cell则占用表格的空间。
table-row: 元素显示为表格行，此时元素的display属性会被设置为table-cell，而table-cell则占用表格的空间。
table-cell: 元素显示为表格单元格，占用表格的空间。

二、实现方法

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

初始隐藏

最简单的实现方法是在CSS中设置元素的display属性为none。比如，下面的代码中，div元素的初始状态是隐藏的：

div{  display:none;}

点击显示

通过JavaScript，可以实现点击一个按钮时显示或隐藏一个元素。首先，在HTML中定义一个按钮：

<button onclick="toggle()">点击显示/隐藏</button>

这里定义了一个onclick事件，当按钮被点击时，会执行toggle()函数。其次，在CSS中，设置元素的display属性为none，如下所示：

#box{  display:none;}

最后，在JavaScript中，定义toggle()函数，通过改变元素的display属性来实现显示或隐藏：

function toggle(){  var box = document.getElementById("box");  if(box.style.display == "none"){    box.style.display= "block";  }  else{    box.style.display= "none";  }}

鼠标滑过显示

同样，可以通过JavaScript实现鼠标滑过时显示或隐藏一个元素。在HTML中，定义一个元素：

<div onmouseover="show()" onmouseout="hide()">鼠标滑过显示/隐藏</div>

这里定义了onmouseover和onmouseout事件，分别表示鼠标滑过和离开的操作。其次，在CSS中，设置元素的display属性为none，如下所示：

#box{  display:none;}

最后，在JavaScript中，定义show()和hide()函数：

function show(){  var box = document.getElementById("box");  box.style.display= "block";}function hide(){  var box = document.getElementById("box");  box.style.display= "none";}

三、应用实例

弹出框

通过CSS的display属性，可以实现弹出框的显示与隐藏。在HTML中，定义一个按钮和一个弹窗：

<button onclick="show()">点击弹窗</button><div id="dialog">  <h2>弹窗标题</h2>  <p>弹窗内容</p>  <button onclick="hide()">关闭弹窗</button></div>

接着，在CSS中，设置弹窗的display属性为none，如下所示：

#dialog{  display:none;  position:absolute;  top:50%;  left:50%;  width:400px;  height:300px;  margin-left:-200px;  margin-top:-150px;  background:#fff;  border:1px solid #ccc;  padding:20px;}

这里设置了弹窗的宽度、高度、位置、背景色等样式。最后，在JavaScript中，定义show()和hide()函数，分别来控制弹窗的显示和隐藏：

function show(){  var dialog = document.getElementById("dialog");  dialog.style.display= "block";}function hide(){  var dialog = document.getElementById("dialog");  dialog.style.display= "none";}

图片轮播

通过CSS的display属性，可以实现图片轮播的切换效果。在HTML中，定义一个图片容器和多个图片：

<div id="slider">  <img  src="img/1.jpg" / alt="css显示与隐藏" >  <img  src="img/2.jpg" / alt="css显示与隐藏" >  <img  src="img/3.jpg" / alt="css显示与隐藏" >  <img  src="img/4.jpg" / alt="css显示与隐藏" ></div>

接着，在CSS中，设置图片容器的样式，如下所示：

#slider{  width:500px;  height:300px;  overflow:hidden;  position:relative;}#slider img{  position:absolute;  top:0;  left:0;  display:none;  width:100%;  height:100%;}

这里设置了图片容器的宽度、高度、溢出隐藏以及图片的位置和显示属性。最后，在JavaScript中，实现图片轮播的效果：

var imgs = document.querySelectorAll("#slider img");var index = 0;setInterval(function(){  imgs[index].style.display = "none";  index = (index + 1) % imgs.length;  imgs[index].style.display = "block";}, 2000);

这里使用了setInterval函数，每隔2秒切换一个图片。具体实现方式是，先将当前图片的display属性设置为none，然后计算下一张图片的index值，最后将该图片的display属性设置为block。

四、总结

css显示与隐藏功能的实现方法非常简单，但却是Web开发中的一个基础技能。在实际开发中，可以通过CSS的display属性，实现各种效果，比如弹窗、图片轮播等。同时，通过JavaScript的配合，可以实现更加丰富的交互效果。

文章推荐

css显示与隐藏

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗