让DOM从页面中消失的几种方法

---

一般最先想到的就是这两种：

1.display:none;（将整个元素隐藏，并且不会占据任何的空间）
2.visibility:hidden;（元素的内容不可见，但是元素仍然保持原来的位置和大小）

3.设定它的位置,让其消失不见：

position:absolute或fixed，用z-index遮盖。

4

overflow:hidden将要隐藏的元素移除父元素的范围。

5.

设置元素为透明：即opacity:0；

6.

设置元素的clip（在新的css中使用clip-path来代替clip）
要让其生效，必须给元素的position的值设置为absolute或者fixed。

7.

将元素的font-size，line-height,width,height设置为0；（虽然这些方法很赖皮。）

8.

设置元素的transform的translateX（Y）的值为-100%；

总结： 对于之让页面显示的dom元素消失上面几种方法足以。

参考文章中的比较高大上的点。

1.使用aria-hidden="true"可以隐藏dom树上的元素，但对于用户而言，在屏幕上仍然可见，只是屏幕阅读器无法阅读。

2.用visibility:inherit代替visivility:visible避免意外的显示内容。尤其是在div的嵌套中，父元素设置了visibility：hidden。

3.对于设置aria-hidden的元素，不附加任何隐藏元素的样式。

4.h5中，可以直接在元素上显示的声明hidden从而隐藏元素。

5.使用.visuallyhidden声明隐藏css的样式，在屏幕元素隐藏元素。结合clip-path使用，使元素隐藏。

eg：只有当我们focus或者active的时候让元素可见。target或者别的事件触发的时候并不可见。

.visuallyhidden:not(:focus):not(:active){
        position: absolute;
        width: 1px;
        height: 1px;
        margin:-1px;
        border:0;
        padding: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(100%);
        overflow: hidden;
    }