隐藏一个元素有哪些方法以及区别

前言

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

隐藏的几种方式

display:none

.box {
    display: none;
}

• 读屏软件不会阅读元素中的内容
• 元素将从页面中消失，元素不可见甚至连盒子模型也不会生成，不会占用页面任何空间
• 元素上所有的事件将无法被正常触发
• 子孙元素同时被隐藏
• 该状态下为元素添加其他过渡效果都是无效的，因为切换状态的时候都是立即生效

visilibity:hidden

.box {
    visibility: hidden;
}

• 读屏软件不会阅读元素中的内容
• 元素不会显示，但是依然占据原本该有的空间位置，元素上的点击事件不能被触发
• visibility属性可继承，子元素可以通过设置visibility:visible来实现可见
• 如果子元素为visible，那么子元素的点击事件可被触发，此时visibility为hidden的父级元素的事件会在事件冒泡阶段被触发

opacity：0

.box {
    opacity: 0;
}

• 读屏软件会阅读元素中的内容
• 元素依旧存在页面上，并且会占用页面空间位置
• 元素上绑定的事件可以被正常触发；
• opacity可被继承，子元素可以通过设置opacity:1来实现可见

position:relative

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

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

position：absolute

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

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

总结

• 以上总结了页面总隐藏元素的几种方式以及它们各自的区别。

• 平时的开发过程中我们可以按需使用这几种方式控制元素的隐藏与显示。

• 本期就先聊到这，

• 感谢你的阅读，

• bye~