浅谈CSS隐藏元素的方法及使用,你知道几个?
Admin 2021-04-25 群英技术资讯 697 次浏览
属性 | 值 | 是否在页面上显示 | 注册点击事件是否有效 | 是否存在于可访问性树中 |
---|---|---|---|---|
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>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
使用css3中animation属性如何实现流光按钮效果?我们知道css3中animation属性是css3动画效果中常见的属性,因此使用这个属性我们能够实现很多酷炫的效果,下面小编就给大家分享如何使用animation属性实现鼠标停在按钮上有流光按钮效果的代码。
CSS中怎样实现页面禁止复制?有时候我们不想要让别人直接复制我们网站的内容,那么有什么方法可以禁止复制呢?这里我们使用user-select属性,可以规定是否能够选取元素的内容,下面我们具体看看怎样实现。
本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式,通过本文,你可能可以学会:通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 <progress>创建进度条
本篇文章主要的为大家讲述的是关于html meta标签的三要素,就是三属性的组成和使用的介绍,里面有很多比较重要的属性值,在网页中都是很有用的,现在让我们一起来看这篇文章吧
这篇文章主要介绍了css实现中间文字两边横线效果 ,需要的朋友可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008