隐藏一个元素有哪些方法以及区别开发过程中我们经常会对一个元素进行显示和隐藏的操作。那么我们都有哪些方式可以来隐藏页面上的

前言

开发过程中我们经常会对一个元素进行显示和隐藏的操作。那么我们都有哪些方式可以来隐藏页面上的一个元素呢？它们分别有什么不一样的地方？本文我们就一起来探讨一下。

将元素的display属性设置为none

.box {
    display: none;
}

将元素的visibility属性设置为hidden

.box {
    visibility: hidden;
}

将元素的opacity属性值设置为0

.box {
    opacity: 0;
}

将元素的position属性设置为relative，并且top和left设置为极大负值（将元素移出视窗外面）

.box {
    position:relative;
    left: -10000px;
    top: -10000px;
}

读屏软件会阅读元素中的内容
元素依然存在页面上，会影响页面的布局
绑定事件可被正常触发
position属性可被继承（position: inherit），子元素可以通过设置relative、position、fixed、inherit配合top、bottom、right、left值重新进行定位。

将元素的position属性设置为absolute，并且top和left设置为极大负值（将元素移出视窗外面）

.box {
    position: absolute;
    top: -9000px;
    left: -9000px;
}

读屏软件会阅读元素中的内容
元素依然存在页面上，不会影响页面的布局
绑定事件可被正常触发
position属性可被继承（position: inherit），子元素可以通过设置relative、position、fixed、inherit配合top、bottom、right、left值重新进行定位。