display: none; 与 visibility: hidden;有什么区别?

在结构方面,display: none会使元素完全从渲染树中消失,不占据任何空间,且无法点击。而visibility: hidden则不会使元素从渲染树中消失,元素继续占据空间,只是其内容不可见,也无法点击。opacity: 0同样不会使元素从渲染树中消失,元素仍占据空间,内容不可见,但是可以点击。

在继承方面,display: noneopacity: 0是非继承属性,子孙节点的消失是由于元素从渲染树中消失造成的,通过修改子孙节点的属性无法使其显示。而visibility: hidden是继承属性,子孙节点的消失是由于继承了hidden,通过设置visibility: visible可以使子孙节点显示。

在性能方面,display: none的修改会导致文档回流,读屏器不会读取display: none元素的内容,性能消耗较大。visibility: hidden的修改只会导致元素本身的重绘,性能消耗较小,读屏器会读取visibility: hidden元素的内容。opacity: 0的修改会导致重绘,性能消耗较小。

他们的共同点是:他们都能使元素不可见,且他们都可以被JS获取到。

你可能感兴趣的:(前端,javascript,html)