display、visibility、opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。

除了display、visibility、opacity三个属性可以隐藏元素之外,是否还存在其它属性可以隐藏元素呢?

它们之间又存在什么必然的联系呢?

这就是我们今天要讨论的问题css隐藏元素的7种思路

前言

display、visibility、opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。属性值是否在页面上显示注册点击事件是否有效是否存在于可访问性树中displaynone否否否

visibilityhidden否否是

opacity0否是是

除了display、visibility、opacity三个属性可以隐藏元素之外,是否还存在其它属性可以隐藏元素呢?它们之间又存在什么必然的联系呢?这就是我们今天要讨论的问题。

注:由于篇幅有限,本文并未提及一些像filter:alpha(opacity=0); zoom:0;之类的兼容属性。

第一种:移除出可访问性树

display : none

display属性可以设置元素的内部和外部显示类型。将display设置为none会将元素从可访问性树中移除。

代码:display : none按钮按钮

第二种:隐藏元素

visibility: hidden

将visibility设置为hidden会使元素不可见,但此时元素仍然位于可访问性树中(display: none时元素被移出可访问性树 ),注册点击事件无效。

代码:visibility: hidden按钮按钮

第三种:透明

opacity: 0

opacity(不透明度),取值范围0(完全透明) ~ 1(完全不透明),将opacity设置为0会使元素完全透明,此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。

代码:opacity: 0按钮按钮

transparent

将元素的background-color、color和border-color设置为transparent(透明),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。

代码:transparent按钮按钮

rgba(0,0,0,0)

从技术上说,transparent是 rgba(0,0,0,0) 的简写,将元素的background-color、color和border-color设置为rgba(0,0,0,0)(透明),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。

代码:rgba(0,0,0,0)按钮按钮

rgba只需要第四个参数为0即可达到隐藏元素的效果。

hsla(0,0%,0%,0)

hsla使用元素隐藏的机制与rgba一致,都是由第四个参数Alpha所控制的,将元素的background-color、color和border-color设置为hsla(0,0%,0%,0),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。

代码:hsla(0,0%,0%,0)按钮按钮

hsla和rgba一致,只需要第四个参数为0即可达到隐藏元素的效果。

filter: opacity(0%)

filter(滤镜) opacity(0% ~ 100%)转化图像的透明程度,值范围于0%(完全透明) ~ 100%(完全不透明)之间。将元素的filter设置为opacity(0%),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。

代码:filter: opacity(0%)按钮按钮

第四种:缩放

transform: scale(0, 0)

将transform设置为scale(0, 0)会使元素在x轴和y轴上都缩放到0像素,此元素会显示,也会占用位置,但是因为已经缩放到0%,元素和内容占用像素比为0*0,所以看不到此元素及其内容,也无法点击。

代码:transform: scale(0, 0)按钮按钮

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,再裁剪掉元素外的元素内容。

代码:width: 0;height: 0;overflow: hidden按钮按钮

第五种:旋转

transform: rotateX(90deg)

将元素沿着X轴顺时针旋转90度达到隐藏元素的效果。

代码:transform: rotateX(90deg)按钮按钮

transform: rotateY(90deg)

将元素沿着Y轴顺时针旋转90度达到隐藏元素的效果。

代码:transform: rotateY(90deg)按钮按钮

第六种:脱离屏幕显示位置

脱离屏幕显示位置同样可以使元素不可见,但是达到这种效果的css样式太多了,这里只举例一种情况说明。

代码:脱离屏幕显示位置按钮按钮

第七种:遮盖

使用元素遮盖也可以使元素不可见,因为达到这种效果的css样式也很多,故这里只举例一种情况说明。

代码:遮盖按钮按钮

结尾

本人才疏学浅,出现错误之处,还望指出。

实现在页面上隐藏某个元素的css,有趣的css—隐藏元素的7种思路相关推荐

  1. 在html中 常见的块级元素有哪些,常见的css块级元素有哪些

    css块级元素介绍: (学习视频分享:css视频教程) 根据W3C上的解释,就是说block(块级)元素是独占一行显示的.它的兄弟元素必定不会与其在同一行中(除非脱离了文档流).其实,通俗点来说,就是 ...

  2. [css] 在页面上隐藏元素的方法有哪些?

    [css] 在页面上隐藏元素的方法有哪些? position配合z-index; 或者 left/top/bottom/right : -100%:margin-left: -100%;width: ...

  3. linux访问网页元素,Linux_DOM和JAVASCRIPT访问页面上的元素,访问方法:getElementById() - phpStudy...

    DOM和JAVASCRIPT访问页面上的元素 访问方法: getElementById():返回拥用传递给该方法的指定id的第一个对象的引用. getElementsByName():返回拥用传递该方 ...

  4. selenium Element is not clickable because another element obscures it — 点击被页面上其他元素遮住的控件,亲试有效!!!

    点击被页面上其他元素遮住的控件 使用WebDriver点击界面上Button元素时,如果当前Button元素被界面上其他元素遮住了, 或没出现在界面中(比如Button在页面底部,但是屏幕只能显示页面 ...

  5. 页面上有两个元素id相同,js中如何取值

    页面上有两个table,id都是"cont2",现要在js中取到这两个table,改变样式. js实现: var tab2=document.all.cont2(1); var  ...

  6. js隐藏html页面元素高度,如何使用jQuery获取隐藏元素的高度?

    HTML元素可以在jquery hide()函数的帮助下隐藏,或者也可以通过在css中使设置visibility:hidden来轻松隐藏.那么如何使用jquery找到这个隐藏元素的高度?下面本篇文章就 ...

  7. python操作网页界面_python3 操作页面上各种元素的方法

    (1)       控制浏览器 ①控制浏览器窗口大小set_window_size(宽,高) 打开浏览器全屏maximize_window() ②控制浏览器后退back().前进forward() ③ ...

  8. display none 隐藏后怎么显示_web前端入门到实战:元素显示隐藏的9种思路

    我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴 ...

  9. css 隐藏元素 显示元素_使用CSS打印时如何隐藏元素?

    css 隐藏元素 显示元素 Introduction: 介绍: We have come across many challenges while developing a website or we ...

最新文章

  1. C#获取枚举描述代码
  2. IM消息送达保证机制实现(一):保证在线实时消息的可靠投递
  3. 配置maven mvn命令使用jdk 1.7编译
  4. java.lang.IllegalStateException: PathVariable/RequestParam annotation was empty on param 0.
  5. 【Linux系统编程】进程间通信--消息队列
  6. 我的工作日报 - 2020-9-11 星期五
  7. msp430 c语言开发环境,如何使用C语言来编写MSP430的高质量代码
  8. iText中输出 中文
  9. 数据科学 IPython 笔记本 8.11 多个子图
  10. Spark 2.2 Core :TimSort 的原理与源码分析
  11. centos7 最小化安装 无 ifconfig,netstat 的安装
  12. python网页内容获取记录pkg
  13. 废话少说 分析java抽象类与接口的区别
  14. 兄弟连教育分享:用CSS实现鼠标悬停提示的方法
  15. excel如何拟合直线(怎样用excel拟合直线)
  16. vue样式初始化_前端Vue项目——初始化及导航栏
  17. 分享一个特别好用的站长在线工具箱
  18. 在word中如何设置翻译功能?原来word还能翻译多种语言!
  19. 如何转换为YOLO txt格式
  20. HDR视频色调映射算法(之二:Adaptive temporal TMO)

热门文章

  1. spring-boot入门之二——验证、AOP日志、异常处理
  2. 数据挖掘中分类算法小结
  3. UITableView数据更新问题
  4. vmware vsphere 虚拟化之安装esxi
  5. Fork 一个仓库并同步
  6. 配置CAS应用客户端
  7. android开发4:Android布局管理器1(线性布局,相对布局RelativeLayout-案例)
  8. linux 下常见启动文件配置
  9. 桥牌笔记:当其它希望不存在时,才进行飞张
  10. “云计算”三部曲之二:与“云”共舞——再谈云计算