分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

前端瓶子君

共 911字,需浏览 2分钟

 ·

2021-03-10 16:22

结构:

display:none : 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden :不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,不能点击 opacity: 0 : 不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,可以点击

继承:

display: none 和 opacity: 0 :是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示。 visibility: hidden :是继承属性,子孙节点消失由于继承了 hidden ,通过设置 visibility: visible; 可以让子孙节点显式。

性能:

display: none : 修改元素会造成文档回流,读屏器不会读取 display: none 元素内容,性能消耗较大 visibility: hidden : 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取 visibility: hidden 元素内容 opacity: 0 :修改元素会造成重绘,性能消耗较少

联系:

它们都能让元素不可见

来源:https://muyiy.cn/question/

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端算法源码编程群,每日一刷(工作日),每题瓶子君都会很认真的解答哟
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持
浏览 20
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报