前言
- 隐藏页面中某个元素的方法有哪些？
隐藏元素方案
首先什么叫隐藏元素，大家第一反应就是display:none，元素就被隐藏了。
没错，这确实是隐藏元素的一种，但是过于片面。实际上我们可以把隐藏元素分为3大类：
- 完全隐藏：元素从渲染树中消失，不占据空间。
- 视觉上的隐藏：屏幕中不可见，占据空间。
- 语义上的隐藏：读屏软件不可读，但正常占据空间。
完全隐藏
-
display: none -
HTML5 新增的
hidden属性，相当于display: none
<div hidden></div>
视觉上隐藏
视觉上的隐藏，就是说元素还占据着位置，只是视觉上不可见而已。
-
opacity: 0将透明度设置为0 -
visibility: hidden
这也是大家比较熟知的一种方式，通过CSS中的visibility属性来隐藏元素，使其不可见，但是仍然会占位。
- 绝对定位
这种方式以前用的比较多，设置posoition为absolute或fixed，通过过设置top、left等值，将其移出可视区域。例如:
posoition: absolute;
left: -999px;
top: -999px;
- 设置
margin
通过设置margin值，将其移出可视区域范围(可视区域占位)。例如:
margin-left: -9999px;
- 设置宽高为0
这也是比较常见的一种方式，简单说就是将元素的margin、border、padding、height和width等影响元素盒模
型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow: hidden来隐藏其子元素。
width: 0;
height: 0;
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大类
完全隐藏：元素从渲染树中消失，不占据空间。
视觉上的隐藏：屏幕中不可见，占据空间。
语义上的隐藏：读屏软件不可读，但正常占据空间。
完全隐藏的方式有：设置disploy:none、为元素设置hidden属性。
视觉上隐藏的方式有：设置opacity属性为0、绝对定位的left和top值设置为-999px、设置margin-left值 为-999px、设置宽高为0、裁剪元素。
语义上的隐藏方式为将aria-hidden属性设置为true使读屏你件不可读。
