不使用 JavaScript 来隐藏元素的若干方法

原文地址

不使用 JavaScript 来隐藏元素的若干方法 | GitHub

这是一道经典面试题，也是最近帮朋友解决稿定设计的水印时想了各种方案，所以在此总结下（目前就 11 种）

隐藏元素的若干方法 Demo

1. width height

修改元素的 width 或者 height 属性（需要配合 overflow: hidden; 使用）

特点：

1. 不占据空间
2. 不响应事件
3. 支持动画

2. display: none

使元素不再显示，其对布局不会有影响

特点：

1. 不占据空间
2. 不响应事件
3. 不支持动画

3. visibility: hidden

隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明，将其子元素设为 visibility: visible 时则该子元素依然可见

visibility - CSS：层叠样式表 | MDN

特点：

1. 占据空间
2. 不响应事件
3. 不支持动画

4. relative + 负 z-index

当元素之间重叠的时候 z-index 较大的元素会覆盖较小的元素在上层进行显示。

将元素的 z-index 属性设置为负值来达到隐藏元素的效果（实际是将元素放在了我们看不到的层叠上下文中）

z-index - CSS：层叠样式表 | MDN

创建层叠上下文

层叠上下文 - CSS：层叠样式表 | MDN

• 根元素
• position 不为 static
• flex 和 grid 容器的子元素且 z-index 值不为 auto
• opacity 不为 1
• transform 不为 none
• filter 不为 none
• backdrop-filter 不为 none
• clip-path 不为 none
• mask / mask-image / mask-border 不为 none
• mix-blend-mode 不为 normal
• contain 为 layout、paint 或包含它们其中之一的合成值
• 设置了 isolation: isolate
• 设置了 -webkit-overflow-scrolling: touch
• 设置了 will-change

特点：

1. 占据空间
2. 不响应事件
3. 不支持动画

5. absolute + 负 left

通过 position: absolute; left: -9999px 将元素移除可视区域来达到隐藏元素的效果

特点：

1. 不占据空间
2. 不响应事件
3. 支持动画

6. color + background

将元素的颜色值属性 color background-color 设置为 transparent 达到隐藏元素的效果

特点：

1. 占据空间
2. 响应事件
3. 支持动画

7. clip clip-path

clip-path 属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏。可以使用 clip-path: circle(0) 来将元素隐藏

clip-path（CSS：层叠样式表）—— MDN

特点：

1. 占据空间
2. 不响应事件
3. 支持动画

8. transform

transform 属性允许你旋转、缩放、倾斜或平移指定元素。可以使用 transform: scale(0) 来将元素隐藏，还可以使用 rotateY(90deg) skew(90deg) 等属性达到隐藏元素效果

transform - CSS：层叠样式表 | MDN

特点：

1. 占据空间
2. 不响应事件
3. 支持动画

9. opacity: 0

opacity 属性用于指定一个元素的不透明度

当 opacity 的属性值不为 1 时，会把元素放置在一个新的层叠上下文中

一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的 opacity 属性值

opacity - CSS：层叠样式表 | MDN

特点：

1. 占据空间
2. 响应事件
3. 支持动画

10. filter: opacity(0)

opacity() 转化图像的透明程度（已有的 opacity 属性很相似，不同之处在于通过 filter，一些浏览器为了提升性能会提供硬件加速）

filter - CSS：层叠样式表 | MDN

特点：

1. 占据空间
2. 响应事件
3. 支持动画

11. 全局属性 hidden

全局属性 hidden 是一个布尔属性，如果一个元素设置了这个属性，它就不会被显示（本质上是使用 display: none）

hidden - HTML（超文本标记语言） | MDN

特点：

1. 不占据空间
2. 不响应事件
3. 不支持动画