首页 > 其他分享 >比较 opacity: 0、visibility: hidden、display: none

比较 opacity: 0、visibility: hidden、display: none

时间:2023-09-28 14:01:35浏览次数:41  
标签:opacity none 渲染 元素 visibility hidden

结构

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

继承

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

性能

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


标签:opacity,none,渲染,元素,visibility,hidden
From: https://blog.51cto.com/u_15930000/7638895

相关文章