css属性opacity: 0;display: none;visibility: hidden的区别;隐藏页面中的某个元素的方法有哪些?

css属性opacity: 0;display: none;visibility: hidden的区别

opacity: 0;visibility: hidden;display: none; 三者都是让对应的元素不可见。

区别可以从结构、继承、性能来了解

css 复制代码
opacity: 0;
visibility: hidden;
display: none;

结构

opacity: 0; 会让元素完全从渲染树(dom)中消失,渲染的时候不占据任何空间, l可以点击。

visibility: hidden; 不会让元素从渲染树(dom)消失,渲染元素继续占据空间,只是内容不可见,不能点击。

display: none; 不会让元素从渲染树(dom)消失, 渲染的时候不占据任何空间,只是内容不可见,不能点击。

继承

opacity: 0;display: none; 是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示。

visibility: hidden; 是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式。

性能

opacity: 0; 修改元素会造成文档重排,读屏器不会读取display: none元素内容,性能消耗较大。

visibility: hidden; 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容。

display: none; 修改元素会造成重绘,性能消耗较少。

隐藏页面中的某个元素的方法有哪些?

屏幕并不是唯一的输出机制,比如说屏幕上看不见的元素(隐藏的元素),其中一些依然能够被读屏软件阅读出来(读屏软件依赖于可访问性树)。

为了消除它们之间的歧义,我们将其归为三大类:

完全隐藏: 元素从渲染树中消失,不占据空间。 视觉上的隐藏 : 屏幕中不可见,占据空间。 语义上的隐藏: 读屏软件不可读,但正常占据空。

完全隐藏 1、display 属性

css 复制代码
display: none;

2、hidden 属性 HTML5 新增属性,相当于 display: none

html 复制代码
<div hidden></div>

3、 opacity 属性

css 复制代码
opacity: 0;

视觉上的隐藏 1、设置 posoition 为 absolute 或 fixed,通过设置 top、left 等值,将其移出可视区域。

css 复制代码
position:absolute;
left: -99999px;

2、设置 position 为 relative,通过设置 top、left 等值,将其移出可视区域。

css 复制代码
position: relative;
left: -99999px;
height: 0

3、设置 margin 值,将其移出可视区域范围(可视区域占位)。

javascript 复制代码
margin-left: -99999px;
height: 0;

语义上隐藏 1、aria-hidden 属性 读屏软件不可读,占据空间,可见。

javascript 复制代码
<div aria-hidden="true"></div>

rgba()和opacity的透明效果有什么不同?

rgba() 和 opacity 都能实现透明效果,但最大的不同是 opacity 作用于元素, 以及元 素内的所有内容的透明度,而 rgba() 只作用于元素的颜色或其背景色 。 ( 设置 rgba 透明的元素的子元素不会继承透明效果!)

总结

opacity: 0;、visibility: hidden;、display: none; 三者都是让对应的元素不可见。
持续学习总结记录中,回顾一下上面的内容: css属性opacity: 0;display: none;visibility: hidden的区别;隐藏页面中的某个元素的方法有哪些?rgba()和opacity的透明效果有什么不同?

相关推荐
爱分享的程序员14 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘20 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出21 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的21 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解24 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵27 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im28 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man28 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下43 分钟前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构