隐藏元素方式总结

经典真题

• 隐藏页面中的某个元素的方法有哪些？

隐藏元素方案汇总

首先什么叫隐藏元素，大家第一反应就是 display:none，元素就被隐藏了。

没错，这确实是隐藏元素的一种，但是太过于片面。我们隐藏元素实际上可以分为 3 大类：

• 完全隐藏：元素从渲染树中消失，不占据空间。
• 视觉上的隐藏：屏幕中不可见，占据空间。
• 语义上的隐藏：读屏软件不可读，但正常占据空间。

完全隐藏

display 属性

首先就是设置 display 为 none，这样元素就被隐藏了，并且是不占据空间的。

hidden 属性

这是 HTML5 新增属性，相当于 display: none，直接写在元素上面，例如：

<div hidden></div>

视觉上隐藏

视觉上的隐藏，就是说元素还占据着位置，只是视觉上不可见而已。

opacity 属性

这是大家比较熟知的一种方式，将透明度设置为 0，视觉上就会变得不可见。

opacity:0

visibility:hidden

这也是大家比较熟知的一种方式，通过 CSS 中的 visibility 属性来隐藏元素，使其不可见，但是仍然会占位

visibility:hidden

绝对定位

这种方式以前用的比较多，设置 posoition 为 absolute 或 fixed，通过设置 top、left 等值，将其移出可视区域。例如：

position: absolute;
left: -999px;
top: -999px;

设置 margin

通过设置 margin 值，将其移出可视区域范围（可视区域占位）。例如：

margin-left: -99999px;

设置宽高为 0

这也是比较常见的一种方式，简单说就是将元素的 margin、border、padding、height 和 width 等影响元素盒模型的属性设置成 0，如果元素内有子元素或内容，还应该设置其 overflow:hidden 来隐藏其子元素

width: 0px;
height: 0px;
overflow: hidden

裁剪元素

隐藏元素的另一种方法是通过剪裁它们实现，具体是通过 clip-path 属性，这个属性比较新，浏览器兼容性也会比较差，但是了解一下还是非常有必要的。例如：

clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

语义上隐藏

aria-hidden 属性

通过设置 aria-hidden 属性为 true 使读屏软件不可读，但是元素仍然占据空间并且可见。

<div aria-hidden="true"></div>

真题解答

• 隐藏页面中的某个元素的方法有哪些？

参考答案：

隐藏元素可以分为 3 大类：

• 完全隐藏：元素从渲染树中消失，不占据空间。
• 视觉上的隐藏：屏幕中不可见，占据空间。
• 语义上的隐藏：读屏软件不可读，但正常占据空。

完全隐藏的方式有：设置 display:none、为元素设置 hidden 属性。

视觉上隐藏的方式有：设置 opacity 属性为 0、绝对定位的 left 和 top 值设置为 -999px、设置 margin-left 值为 -999px、设置宽高为 0、裁剪元素。

语义上的隐藏方式为将 aria-hidden 属性设置为 true 使读屏软件不可读。

-EOF-