CSS隐藏元素的方法-CFANZ编程社区

CSS隐藏元素的方法

乌龙茶3297 2022-04-03 阅读 106

标签: css

隐藏元素之后，它在页面的行为如何？

HTML文件如下
很简单，就一个div

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .target {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="target"></div>
  <script>
    const e = document.getElementsByClassName('target')[0]
    e.addEventListener('click', () => console.log('点击我了~~'))
  </script>
</body>
</html>

它在浏览器中的效果是如下
点击红色区域会打印结果
浏览器显示效果
接下来就正式聊一下隐藏元素的方法

1.设置display: none;

引入css文件

/*display.css*/
.target {
  display: none;
}

显示结果

div被隐藏了，并且点击哪里都不会触发点击事件，所以元素的行为也被禁止了
在这里插入图片描述

2.设置overflow: hidden;

.target{
	overflow: hidden;
}

在这里插入图片描述
这个属性意为将超出的部分隐藏掉

点击可见区域可以触发点击行为，点击隐藏区域不可以触发点击就行为
在这里插入图片描述

3.设置opacity: 0;

引入css文件

/*opacity.css*/
.target {
	opacity: 0;
}

在这里插入图片描述
元素不见了，但是在页面中依然占据位置，并且能够触发点击事件

4.设置position: absolute; + 大负left + 大负top

引入css文件

.target {
  position: absolute;
  top: -999px;
  left: -999px;
  transition: all 3s;
}

在这里插入图片描述
在页面中发现不到已经隐藏的元素，那就更别说点击它了，这个一般可以用来做出场动画

这里我是给document绑定了点击事件，不是自己飘出来的哈

5.设置visibility: hidden;

引入css文件

.target {
  visibility: hidden;
}

在这里插入图片描述

元素同样被隐藏了，在页面会占据位置，并且没有点击行为
在这里插入图片描述

0 条评论