本文分析了前端开发中使元素不可见的三种方式：opacity: 0、visibility: hidden和display: none。display:none会使元素从渲染树消失，不占据空间且无法点击；visibility: hidden保持元素占用空间但内容不可见，仍可被点击；而opacity: 0则元素可见但透明，依旧可点击。不同属性在继承性和性能上有区别，适用于不同场景。
结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
性能：displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少
联系：它们都能让元素不可见
扫一扫
1827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
