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

我就是我 2022-05-26 13:36 281阅读 0赞

--------------------

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

> 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元素消失上面几种方法足以。

[参考文章][Link 1]中的比较高大上的点。

> 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; }

[Link 1]: http://web.jobbole.com/88181/

发表评论取消回复

表情：

评论列表（有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue跳转页面常用的几种方法

vue跳转页面有好几种不同方法，下面将通过实例代码给大家介绍，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。 1：router-link跳转

水深无声/ 2022年10月19日 04:17/ 0 赞/ 241 阅读

相关让终端走代理的几种方法

> 方法1: 在终端中直接运行命令 export http_proxy=http://proxyAddress:port 这个办法的好处是简单直接，并且影响面

比眉伴天荒/ 2022年07月17日 00:59/ 0 赞/ 299 阅读

相关 JSP刷新页面的几种方法

Javascript刷新页面的几种方法 : 1. history.go(0) 2. location.reload() 3. lo

悠悠/ 2022年07月05日 15:29/ 0 赞/ 379 阅读

相关页面自动执行的几种方法（加载）js的几种方法原生和jquery

原生js window.onload=function(){ //写具体的逻辑代码 } Jquery 方法1：

野性酷女/ 2022年06月08日 13:06/ 0 赞/ 328 阅读

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

-------------------- 一般最先想到的就是这两种： > 1.`display:none;`（将整个元素隐藏，并且不会占据任何的空间） > 2.`

我就是我/ 2022年05月26日 13:36/ 0 赞/ 282 阅读

相关原生js获取DOM对象的几种方法

获取DOM元素的方法： 1. 通过id获取 <div id="box"></div> <script> let box= document.getEl

你的名字/ 2022年05月22日 01:09/ 0 赞/ 294 阅读

相关 .NET 页面间传值的几种方法

1. QueryString 　　这是最简单的传值方式，但缺点是传的值会显示在浏览器的地址栏中且不能传递对象，只适用于传递简单的且安全性要求不高的数值。　　传递：　　lo

朴灿烈づ我的快乐病毒、/ 2021年12月24日 03:19/ 0 赞/ 306 阅读

相关防止页面跳转的几种方法

1.`<a href="javascript:;" >先学习</a>` `<a href="javascript:;" >点我试试</a>`：执行一段空白的javascr

Myth丶恋晨/ 2021年11月29日 16:34/ 0 赞/ 477 阅读

相关让div垂直水平居中的几种方法

参考文档：[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/92][https_git

r囧r小猫/ 2021年11月10日 06:04/ 0 赞/ 397 阅读

相关 JSP页面跳转的几种实现方法

初衷：将登录用户的用户名密码form提交到页面2（jsp就是servlet 提交到servlet的就不说了）由页面2判断用户名密码的正确性继而决定跳转的方向下面是几种实

你的名字/ 2021年10月09日 09:46/ 0 赞/ 368 阅读