CSS中有哪些隐藏页面元素的方法?

落日映苍穹つ 2023-10-12 09:39 49阅读 0赞

**目录**

一、前言

二、隐藏页面元素的实现方法

1.利用display:none实现

2.利用visibility:hidden隐藏元素

3.利用opacity:0来隐藏元素

4.设置width,height属性为0隐藏元素

5.利用绝对定位position:隐藏元素

三、display:none、visibility:hidden、opacity的区别

四、小结

--------------------

## 一、前言 ##

在我们进行项目开发阶段，肯定会遇到很多需要隐藏元素的需求，并且每次遇到的需求都限制了我们需要特定的方法去隐藏元素。

> 如消消乐游戏中，当我们消除成功后，我们就不能使用display:none去隐藏元素。这样会导致后面的元素重新计算元素的位置，使位置发生错乱，这时我们就应该使用 visibility:hidden 来实现该效果。

## 二、隐藏页面元素的实现方法 ##

#### **1.利用display:none实现** ####

这是我们比较常见的隐藏元素的方法，通过销毁元素，使元素彻底消失，不在占据位置，后面的元素会占据该元素占据的位置，所以一定会触发重排(回流)

具体实现:

未给第一个元素div设置display

效果图如下![8ce4f96306f040b19d68da1b266b8847.png][]

当给第一个元素设置display时，通过给第一个盒子设置display,并且测试给第一个盒子绑定点击事件，是否会触发。

<div id="red" style="display: none; width: 100px; height: 100px; background: red"></div>
    <div id="green" style="width: 100px; height: 100px; background: green"></div>
    <script>
        let red = document.querySelector('#red');
        red.addEventListener('click', function () {
              console.log('1111');
        });
    </script>

![20d68a524c2b42dba9cfe6ab9d19492b.png][]

红色盒子彻底消失，后面的绿色盒子占据了红色盒子的位置，并且自定义事件不会触发

**特点：元素不可见，不占据空间，无法响应点击事件**

#### **2.利用**visibility:hidden隐藏元素 ####

通过给元素设置为不可见达到隐藏元素的效果,元素还存在，只是设置为了不可见，所以只是触发了重绘，并不会触发重排。

**当给第一个元素设置visibility:hidden时**

<div id="red" style="visibility: hidden; width: 100px; height: 100px; background: red"></div>
    <div id="green" style="width: 100px; height: 100px; background: green"></div>
    <script>
        let red = document.querySelector('#red');
        red.addEventListener('click', function () {
            console.log('1111');
        });
    </script>

效果如下,点击空白处第一个元素位置，不能响应点击事件.

![730727267e494f9294246c398e31658d.png][]

**特点：元素不可见，占据页面空间，无法响应点击事件**

#### **3.利用**opacity:0来隐藏元素 ####

> opacity属性:用来设置元素的透明度，它不仅对颜色有效，对图像或者页面中其它的元素也有效。
> 
> 语法：
> 
>     opacity:value | inherit
> 
> <table style="width:500px;"> 
>  <tbody> 
>   <tr> 
>    <td style="width:124px;">值</td> 
>    <td style="width:375px;">描述</td> 
>   </tr> 
>   <tr> 
>    <td style="width:124px;">value</td> 
>    <td style="width:375px;">规定不透明度，从0.0（完全透明）到 1.0 （完全不透明）</td> 
>   </tr> 
>   <tr> 
>    <td style="width:124px;">inherit</td> 
>    <td style="width:375px;">应该从父元素继承opacity属性的值</td> 
>   </tr> 
>  </tbody> 
> </table>

**通过将元素设置为完全透明（opacity:0）来达到隐藏元素的效果，会占据原有的位置，不一定会引起重绘**

当给第一个元素设置opacity:0 时,达到的页面效果和visibility相同,但是通过点击第一个元素，会触发自定义事件。

![e289bc7b23724e7a99a66ea7b93d6ff6.png][]![8450f5c911da41db865c6a5ce645dbff.png][]

**特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件**

#### 4.设置width,height属性为0隐藏元素 ####

> 块级元素:*块级元素会独占一行(即无法与其他元素显示在同一行内,同时块级元素必须设置宽高，才能正常显示。所以我们通过设置width,height为0可以达到隐藏元素的效果，页面上不显示元素且不占有位置，所以点击事件一定不会生效，且一定会触发重排（改变了元素怒的几何信息大小）*

代码示例:

![25ba349bce5243e393d197c4d4b8a21b.png][]页面效果，只显示绿色盒子，第一个盒子不显示也没有占据位置，且不会出触发点击事件

**特点：元素不可见，不占据页面空间，无法响应点击事件**

#### **5.利用绝对定位**position:隐藏元素 ####

实质上是将元素移除页面，达到隐藏元素的效果

#red {
        position: absolute;
        left: -99999px;
        top: -99999px;
    }

## 三、display:none、visibility:hidden、opacity的区别 ##

<table style="width:600px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:center;width:123px;"></td> 
   <td style="text-align:center;width:142px;">&nbsp; &nbsp; &nbsp;<strong>display:none</strong></td> 
   <td style="text-align:center;width:169px;"><strong>visibility:hidden</strong></td> 
   <td style="text-align:center;width:165px;">opacity:0</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:123px;">页面中是否存在</td> 
   <td style="text-align:center;width:142px;">&nbsp;不存在</td> 
   <td style="text-align:center;width:169px;">存在</td> 
   <td style="text-align:center;width:165px;">存在</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:123px;">重排</td> 
   <td style="text-align:center;width:142px;">会</td> 
   <td style="text-align:center;width:169px;">不会</td> 
   <td style="text-align:center;width:165px;">不会</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:123px;">重绘</td> 
   <td style="text-align:center;width:142px;">会</td> 
   <td style="text-align:center;width:169px;">会</td> 
   <td style="text-align:center;width:165px;">不确定</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:123px;">自身绑定事件</td> 
   <td style="text-align:center;width:142px;">不触发</td> 
   <td style="text-align:center;width:169px;">不触发</td> 
   <td style="text-align:center;width:165px;">可触发</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:123px;">transition（动画）</td> 
   <td style="text-align:center;width:142px;">不支持</td> 
   <td style="text-align:center;width:169px;">支持</td> 
   <td style="text-align:center;width:165px;">支持</td> 
  </tr> 
 </tbody> 
</table>

**重排一定会引起重绘，但重绘不一定会引起重排（后面我会对重绘和重排进行详解）**

## **四、小结** ##

当我们遇到需要隐藏元素的场景时，可以考虑一下最终实现的效果，是否要显示元素，是否需要绑定自定义事件触发事件，是否需要增加动画效果（实现过渡效果）,同时还要考虑性能方面的问题（即是否会触发重排或者重绘），都是我们需要考虑的问题。

以上便是我总结的隐藏元素的方法及特点，欢迎大家讨论，一起学习。

[8ce4f96306f040b19d68da1b266b8847.png]: https://img-blog.csdnimg.cn/8ce4f96306f040b19d68da1b266b8847.png
[20d68a524c2b42dba9cfe6ab9d19492b.png]: https://img-blog.csdnimg.cn/20d68a524c2b42dba9cfe6ab9d19492b.png
[730727267e494f9294246c398e31658d.png]: https://img-blog.csdnimg.cn/730727267e494f9294246c398e31658d.png
[e289bc7b23724e7a99a66ea7b93d6ff6.png]: https://img-blog.csdnimg.cn/e289bc7b23724e7a99a66ea7b93d6ff6.png
[8450f5c911da41db865c6a5ce645dbff.png]: https://img-blog.csdnimg.cn/8450f5c911da41db865c6a5ce645dbff.png
[25ba349bce5243e393d197c4d4b8a21b.png]: https://img-blog.csdnimg.cn/25ba349bce5243e393d197c4d4b8a21b.png