css怎么实现div隐藏与显示

div 隐藏与显示 css

DIV 是 HTML 标签中的一个重要的元素，它可以用来展示文本、图片、视频等。在网页设计中，我们经常会遇到需要将某些元素隐藏或显示的情况，这就需要使用 CSS 对 DIV 进行设置。本文将为大家介绍如何使用 CSS 来实现 DIV 的隐藏和显示。

一、CSS display 属性

CSS display 属性可以控制元素在页面中的显示方式。display 有多种取值，常用的有以下几种：

1. none：元素不显示，也不占用页面空间；
2. block：元素会生成一个块级容器，占用整个变宽，常用于显示文本或图片等块级元素；
3. inline：元素不会独占一行，只占据自身的宽度和高度，常用于显示链接、图片等行内元素；
4. inline-block：与 inline 相似，但是可以设置宽度和高度；
5. flex：弹性布局，可以灵活地分配元素的空间。

我们可以通过设置 CSS 的 display 属性，来实现 DIV 的隐藏和显示效果。

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

下面以一个实例来说明：

在 HTML 文件中，我们创建一个 DIV 元素：

然后在 CSS 文件中，设置 DIV 的 display 属性：

#myDiv{

  display:none;   /* 默认隐藏 */

}

当页面加载之后，这个 DIV 元素就会被隐藏起来。此时，我们需要添加一个事件，来实现鼠标点击时的显示效果。

在 JavaScript 中，可以通过设置元素的 style 属性来改变 CSS 的 display 属性，从而实现元素的隐藏和显示。以下是具体操作：

/ 获取元素 /
 var myDiv = document.getElementById('myDiv');

/ 当鼠标点击时，显示 DIV /
 function showDiv(){

   myDiv.style.display = 'block';

}

/ 当鼠标点击时，隐藏 DIV /
 function hiddenDiv(){

   myDiv.style.display = 'none';

}

这样，当鼠标点击时，DIV 就会以块级元素的形式呈现在页面上。当再次点击时，又会被隐藏起来。

网趣网上购物系统旗舰版

网趣网上购物系统支持PC电脑版+手机版+APP，数据一站式更新，支持微信支付与支付宝支付接口，是专业的网上商城系统，网趣商城系统支持淘宝数据包导入，实现与淘宝同步更新!支持上传图片水印设置、图片批量上传功能，同时支持订单二次编辑以及多级分类隐藏等实用功能，新版增加商品大图浏览与列表显示功能，使分类浏览更方便，支持最新的支付宝即时到帐接口。

下载

二、CSS visibility 属性

另外一个控制元素隐藏和显示的属性是 visibility。visibility 有两个取值：visible（可见）和 hidden（隐藏）。与 display 不同的是，当 visibility 被设置为 hidden 时，元素虽然被隐藏，但是仍然占据页面的空间。

在 HTML 文件中，我们同样创建一个 DIV 元素：

然后在 CSS 文件中，设置 DIV 的 visibility 属性：

#myDiv{

  visibility:hidden;   /* 默认隐藏 */

}

当页面加载之后，这个 DIV 元素就会被隐藏起来。这时，我们需要添加一个事件，来实现鼠标点击时的显示效果。

在 JavaScript 中，我们同样可以通过改变元素的 style 属性来改变元素的 visibility 属性。以下是具体代码：

/ 获取元素 /
 var myDiv = document.getElementById('myDiv');

/ 当鼠标点击时，显示 DIV /
 function showDiv(){

   myDiv.style.visibility = 'visible';

}

/ 当鼠标点击时，隐藏 DIV /
 function hiddenDiv(){

   myDiv.style.visibility = 'hidden';

}

这样，当鼠标点击时，DIV 就会变得可见。再次点击时，又会变得隐藏。

三、总结

在网页设计中，展示和隐藏元素是十分常见的需求。常用的控制元素隐藏和显示的方式主要有两种：一种是通过修改元素的 display 属性来控制，另一种是通过修改元素的 visibility 属性来控制。通过熟练掌握这两种方式，我们能够更加灵活地控制各种元素的显示和隐藏，从而实现更好的网页展示效果。