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;
}

元素同样被隐藏了，在页面会占据位置，并且没有点击行为

CSS隐藏元素的方法相关推荐

5种css隐藏元素的方法_在CSS中隐藏元素的10种方法
5种css隐藏元素的方法 There are multiple ways to hide an element in CSS, but they differ in the way they affe ...
css样式隐藏元素的方法,你不知道的css隐藏元素的方法
css隐藏元素是网页编写常用的方式,根据我的经验总结了以下几种css隐藏元素的方法. 记录 opacity opacity属性的隐藏方法主要是将元素透明度opacity设置为0,从而在视觉上就隐藏了元 ...
CSS隐藏元素五种方法
css隐藏元素的方法 1.利用opacity透明度来隐藏,opacity设置为0,它只是一种视觉隐藏,元素本身依旧占用它的位置并对网页的布局起到作用,它也同样影响用户交互.在读屏软件中会被识别. 2. ...
前端html隐藏元素方式,CSS 隐藏元素的八种方法
前言总括: 本文详细讲述了在网页中用CSS隐藏元素的七种方法. 念念不忘,必有回响;有一口气,点一盏灯. 正文说起隐藏元素我想每一个前端er都能说起几种,但能说全的我想就不是很多了.博主总结了几种 ...
css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方.二:position:absol ...
[css] 在页面上隐藏元素的方法有哪些？
[css] 在页面上隐藏元素的方法有哪些? position配合z-index; 或者 left/top/bottom/right : -100%:margin-left: -100%;width: ...
CSS“隐藏”元素的几种方法的对比
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...
css隐藏元素触发点击事件,css隐藏元素的几种方法中可以触发点击事件的是？...
css隐藏元素的几种方法中可以触发点击事件的是是opacity设置为0的方法. css隐藏元素的方式: 1.display:none;.box{ display: none; } 最简单也最粗暴的方 ...
html 隐藏元素点击事件,css隐藏元素的几种方法中可以触发点击事件的是？
css隐藏元素的几种方法中可以触发点击事件的是是opacity设置为0的方法. css隐藏元素的方式: 1.display:none;.box{ display: none; } 最简单也最粗暴的方 ...

CSS隐藏元素的方法

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

1.设置display: none;

2.设置overflow: hidden;

3.设置opacity: 0;

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

5.设置visibility: hidden;

CSS隐藏元素的方法相关推荐

最新文章

热门文章