使一个dom不可见的几种方法——隐藏元素

隐藏元素的方法有很多，这里我们就来整理具体有哪几种方法，它们谁是真正的隐藏，谁只是视觉不可见，以及效果上都有什么区别，在开发过程中大家斟酌使用。

隐藏元素的方法

1. display: none
2. visibility: hidden
3. opacity: 0
4. <div hidden></div>
5. position: absolute; top: -9999px; left: -9999px;
6. clip-path: polygon(0 0, 0 0, 0 0, 0 0)
7. width: 0; height: 0; overflow: hidden;
8. transform: translate(-9999px, -9999px) || transform: scale(0)

区别

1. display

.hide-dispaly{
	display: none
}

特点：

• 真正意义上的隐藏，元素不会占据任何空间
• 用户无法与其进行直接的交互
• 通过DOM依然可以获取到该元素
• 子孙元素即使重新设置dispaly: block也无法显示
• transition动画会失效

2. visibility

.hide-visibility{
	visibility: hidden;
}

特点

• 隐藏元素依然占据空间，影响其他元素的布局
• 不会影响任何用户的交互
• 通过DOM依然可以获取该元素，无法响应DOM事件
• 其子孙元素可以通过重新设置visibility: visibile来显示

3. opacity

.hide-opacity{
	opacity: 0;
}

特点

• 只是视觉上隐藏，隐藏的元素依然占据着空间，影响其他元素的布局
• 依然能够响应用户的交互
• 通过DOM依然可以获取该元素，可以响应DOM事件
• 其子孙元素即使重新设置了opacity: 1也无法显示

4. hidden
   HEML5新增的hidden属性，可以直接隐藏元素。效果与特点与display一致

<div hidden>
  我是被隐藏的元素
</div>

5. position

.hide-position{
	position: absolute
  top: -9999px
  left: -9999px
}

特点：

• 视觉上隐藏，实际显示在屏幕的可视区之外，不会占据空间，不影响其他元素布局
• 用户无法与其交互
• 通过dom可以获得该元素
• 其子孙元素无法通过重新设置对应的属性来显示

6. clip-path
   通过裁剪元素来实现隐藏

.hide-clip {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

特点：

• 视觉隐藏，隐藏元素占据空间，影响其他元素的布局
• 用户无法与其进行交互
• 通过dom可以获得该元素
• 其子孙元素无法重新设置对应属性来显示

7. overflow

.hide-overflow {
  width: 0;
  height: 0;
  overflow: hidden;
}

特点：

• 视觉隐藏，不占据空间，不影响其他元素布局
• 用户无法与其交互
• 通过DOM可获得该元素
• 子孙元素无法重新设置该属性来显示

8. transfrom

.hide-transform{
	transform: translate(-9999px, -9999px)
}
// 或者
.hide-transform{
	transform: scale(0)
}

特点：

• 视觉隐藏，占据空间，影响其他元素布局
• 用户无法与其交互
• 通过dom可以获得该元素
• 其子孙元素无法重新设置该属性来显示

真实隐藏

我理解的真实隐藏只有

• display: nono
• <div hidden></div>

视觉隐藏

其他都是视觉隐藏

• visibility: hidden
• opacity: 0
• position
• transform
• clip-path
• overflow