有趣的css—隐藏元素的7种思路
css隐藏元素的7种思路
前言
display、visibility、opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。
| 属性 | 值 | 是否在页面上显示 | 注册点击事件是否有效 | 是否存在于可访问性树中 |
|---|---|---|---|---|
| display | none | 否 | 否 | 否 |
| visibility | hidden | 否 | 否 | 是 |
| opacity | 0 | 否 | 是 | 是 |
除了display、visibility、opacity三个属性可以隐藏元素之外，是否还存在其它属性可以隐藏元素呢？它们之间又存在什么必然的联系呢？这就是我们今天要讨论的问题。
注：由于篇幅有限，本文并未提及一些像filter:alpha(opacity=0); zoom:0;之类的兼容属性。
第一种：移除出可访问性树
display : none
display属性可以设置元素的内部和外部显示类型。将display设置为none会将元素从可访问性树中移除。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>display : none</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
display : none;
}
</style>
</head>
<body>
<div>
<button id="normal">按钮</button>
</div>
<div>
<button id="bt">按钮</button>
</div>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
第二种：隐藏元素
visibility: hidden
将visibility设置为hidden会使元素不可见，但此时元素仍然位于可访问性树中(display: none时元素被移出可访问性树 )，注册点击事件无效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>visibility: hidden</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
visibility: hidden;
}
</style>
</head>
<body>
<div>
<button id="normal">按钮</button>
</div>
<div>
<button id="bt">按钮</button>
</div>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
第三种：透明
opacity: 0
opacity(不透明度),取值范围0(完全透明) ~ 1(完全不透明)，将opacity设置为0会使元素完全透明，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>opacity: 0</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
opacity: 0;
}
</style>
</head>
<body>
<div>
<button id="normal">按钮</button>
</div>
<div>
<button id="bt">按钮</button>
</div>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
transparent
将元素的background-color、color和border-color设置为transparent(透明)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中,注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>transparent</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
color: transparent;
background-color: transparent;
border-color: transparent;
}
</style>
</head>
<body>
<div>
<button id="normal">按钮</button>
</div>
<div>
<button id="bt">按钮</button>
</div>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
rgba(0,0,0,0)
从技术上说，transparent是 rgba(0,0,0,0) 的简写，将元素的background-color、color和border-color设置为rgba(0,0,0,0)(透明)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中,注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>rgba(0,0,0,0)</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
border-color: rgba(0,0,0,0);
}
</style>
</head>
<body>
<div>
<button id="normal">按钮</button>
</div>
<div>
<button id="bt">按钮</button>
</div>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
rgba只需要第四个参数为0即可达到隐藏元素的效果。
hsla(0,0%,0%,0)
hsla使用元素隐藏的机制与rgba一致，都是由第四个参数Alpha所控制的，将元素的background-color、color和border-color设置为hsla(0,0%,0%,0)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>hsla(0,0%,0%,0)</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
color: hsla(0,0%,0%,0);
background-color: hsla(0,0%,0%,0);
border-color: hsla(0,0%,0%,0);
}
</style>
</head>
<body>
<div>
<button id="normal">按钮</button>
</div>
<div>
<button id="bt">按钮</button>
</div>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
hsla和rgba一致，只需要第四个参数为0即可达到隐藏元素的效果。
filter: opacity(0%)
filter(滤镜) opacity(0% ~ 100%)转化图像的透明程度,值范围于0%(完全透明) ~ 100%(完全不透明)之间。将元素的filter设置为opacity(0%)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>filter: opacity(0%)</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
filter: opacity(0%);
}
</style>
</head>
<body>
<div>
<button id="normal">按钮</button>
</div>
<div>
<button id="bt">按钮</button>
</div>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
第四种：缩放
transform: scale(0, 0)
将transform设置为scale(0, 0)会使元素在x轴和y轴上都缩放到0像素，此元素会显示，也会占用位置，但是因为已经缩放到0%，元素和内容占用像素比为0*0，所以看不到此元素及其内容，也无法点击。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>transform: scale(0, 0)</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
transform: scale(0,0);
}
</style>
</head>
<body>
<div>
<button id="normal">按钮</button>
</div>
<div>
<button id="bt">按钮</button>
</div>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
width: 0;height: 0;overflow: hidden
将width和height都设置为0，使元素占用像素比为0*0，但此时会出现两种情况：
当元素的display属性为inline时，元素内容会将元素宽高拉开；
当元素的display属性为block或inline-block时，元素宽高为0，但元素内容依旧正常显示，此时再加上overflow:hidden;即可裁剪掉元素外的元素内容。
这个方法跟transform: scale(0,0)的不同点在于：transform: scale(0,0)是将元素与内容都进行缩放，而此方法是将元素缩放到0px，再裁剪掉元素外的元素内容。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>width: 0;height: 0;overflow: hidden</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
width:0;
height:0;
overflow: hidden;
border-width: 0;/* user agent stylesheet中border-width: 2px; */
padding: 0;/* user agent stylesheet中padding: 1px 6px; */
}
</style>
</head>
<body>
<div>
<button id="normal">按钮</button>
</div>
<div>
<button id="bt">按钮</button>
</div>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
第五种：旋转
transform: rotateX(90deg)
将元素沿着X轴顺时针旋转90度达到隐藏元素的效果。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>transform: rotateX(90deg)</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<div>
<button id="normal">按钮</button>
</div>
<div>
<button id="bt">按钮</button>
</div>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
transform: rotateY(90deg)
将元素沿着Y轴顺时针旋转90度达到隐藏元素的效果。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>transform: rotateY(90deg)</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div>
<button id="normal">按钮</button>
</div>
<div>
<button id="bt">按钮</button>
</div>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
第六种：脱离屏幕显示位置
脱离屏幕显示位置同样可以使元素不可见，但是达到这种效果的css样式太多了，这里只举例一种情况说明。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>脱离屏幕显示位置</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
position: fixed;
top: -100px;
left: -100px;
}
</style>
</head>
<body>
<div>
<button id="normal">按钮</button>
</div>
<div>
<button id="bt">按钮</button>
</div>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
第七种：遮盖
使用元素遮盖也可以使元素不可见，因为达到这种效果的css样式也很多，故这里只举例一种情况说明。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>遮盖</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#cover {
z-index: 1;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<button id="normal">按钮</button>
</div>
<div style="position: relative;line-height: normal;">
<button id="bt">按钮</button>
<div id="cover"></div>
</div>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
结尾
本人才疏学浅，出现错误之处，还望指出。
参考
- [1] display | MDN
- [2] visibility | MDN
- [3] opacity | MDN
- [4] transform | MDN
- [5] overflow | MDN
- [6] color | MDN
- [7] transform | MDN
- [8] z-index | MDN
- [9] CSS3 颜色值RGBA表示方式
- [10] 一个也许很傻的问题,在图像处理中alpha到底是什么?
有趣的css—隐藏元素的7种思路的更多相关文章
- css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方. 二:position:abso ...
- CSS隐藏元素的几种方法
使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析 ...
- CSS隐藏元素的几种妙法
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...
- CSS“隐藏”元素的几种方法的对比
本文地址:http://luopq.com/2016/02/15/css-tricks-of-hide-element/,转载请注明 一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设 ...
- 用css隐藏元素的5种方法
.green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...
- CSS隐藏元素的五种方法
1.opacity:0 2.visibility:hidden 3.diaplay:none 4.position:absolute display display属性依照词义真正隐藏元素.将disp ...
- CSS隐藏元素的N种实现方式。
1. width:0; 光有高度是不行的,还得有宽度.缺点文字隐藏不了,可以加个color:#fff和背景颜色一样就ok了,障眼法,迷惑人的,其实内容还在,如果有文字的话,还是可以触发点击事件的,这种 ...
- css隐藏元素的六类13种方法
隐藏元素的方法 隐藏元素的方法可以总结为六类:直接隐藏.对溢出内容隐藏.对元素透明度进行调整.将元素移除当前屏幕.对元素的层级关系进行调整.对元素进行裁剪 只有对元素的透明度进行调整才可以点击,其余都 ...
- html显示与隐藏元素的几种方式
html显示与隐藏元素的几种方式 1.display none : 无 隐藏元素 block : 显示 转换为块级元素 不占位:当隐藏的时候元素就完全没有了.不能看见和操作该元素. 优点:为其他元 ...
随机推荐
- Qt学习笔记-Qt5和Qt4在音频方面的不同-QtAV
之前学习qt4的时候,播放音频用的是phonon播放后端插件+mplayer. 今天改用qt5了.qt5中去掉了phonon模块加了multimedia.但是依然无法播放音乐,因为没有ffmpge s ...
- Turtlebot3新手教程：OpenCR软件设置(shell)
*本文针对如何利用脚本来更新固件进行讲解 具体步骤如下: burger的固件更新 $ export OPENCR_PORT=/dev/ttyACM0 $ export OPENCR_MODEL=bur ...
- 2020安徽程序设计省赛 G序列游戏
2020安徽程序设计省赛 G序列游戏 有一个序列w,初始为空.再给出一个长度为m 单调递增的序列a.你需要对序列w 作如下n 次操作: (1)操作0,在序列尾部添加数字0. (2)操作1,在序列尾部添 ...
- ES6参数默认值，剩余参数及展开数组
一.函数的参数默认值 在ES6之前,想要给参数设置默认值得话,只能在函数体内部加判断设置,比如如果传递参数为undefined时为true, 否则为false,如下图example1,ES6出现语法可 ...
- Phoneix（二）HBase集成Phoenix安装
一.软件下载 1.访问:http://phoenix.apache.org/ 2.点击: 3.进入以下内容:点击 4.跳转到 5.跳转到 6.点击安装包,进入 点击进行下载: 二.安装 phoneni ...
- python实现99乘法表
for x in range(1,10): for y in range(1,10): if x>=y: print("%d*%d=%d\t"%(y,x,x*y),end=' ...
- netty核心组件之channel、handler、ChannelHandlerContext、pipeline
channel介绍: netty中channel分为NioServerScoketChannel和NioSocketChannel,分别对应java nio中的ServerScoketChannel和 ...
- C#扫盲篇(四)：.NET Core 的异步编程-只讲干货（async,await,Task）
关于async,await,task的用法和解释这里就不要说明了,网上一查一大堆.至于为啥还要写这篇文章,主要是其他文章水分太多,不适合新手学习和理解.以下内容纯属个人理解,如果有误,请高手指正.本文 ...
- C中的dll 、lib和exe文件
参考:链接1 链接2 DLL 动态链接库(Dynamic Link Library,缩写为DLL),运行时加载是一个可以被其它应用程序共享的程序模块,其中封装了一些可以被共享的例程和资源.动态链接 ...
- 操作系统-1w字关于内存的总结
内存的基本概念 什么是内存,有何作用 内存是用于存放数据的硬件.程序执行前需要先放入内存中才能被CPU处理 存储单元 内存中也有一个一个的小房间,每个小房间就是一个存储单元. 如果计算机按照 字节编址 ...