简谈CSS隐藏元素的方法及使用，你知道几个？
发布时间：2023-07-20 14:29:36 所属栏目：语言 来源：
导读： 在CSS中隐藏网页页面元素的方法有很多，例如display、visibility、opacity这三个属性，应该是大家首先想到的，其实除了设置这些熟悉，我们还有其他方法也能够实现CSS隐藏元素，下面我们就一起来看看css隐藏元素的方
|
在CSS中隐藏网页页面元素的方法有很多，例如display、visibility、opacity这三个属性，应该是大家首先想到的，其实除了设置这些熟悉，我们还有其他方法也能够实现CSS隐藏元素，下面我们就一起来看看css隐藏元素的方法。 首先，先了解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> （编辑：聊城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
