使一个dom不可见的几种方法

#使一个dom不可见的几种方法| 来源: 网络整理| 查看: 265

隐藏元素的方法有很多，这里我们就来整理具体有哪几种方法，它们谁是真正的隐藏，谁只是视觉不可见，以及效果上都有什么区别，在开发过程中大家斟酌使用。

隐藏元素的方法 display: nonevisibility: hiddenopacity: 0position: absolute; top: -9999px; left: -9999px;clip-path: polygon(0 0, 0 0, 0 0, 0 0)width: 0; height: 0; overflow: hidden;transform: translate(-9999px, -9999px) || transform: scale(0) 区别 display .hide-dispaly{ display: none }

特点：

真正意义上的隐藏，元素不会占据任何空间用户无法与其进行直接的交互通过DOM依然可以获取到该元素子孙元素即使重新设置dispaly: block也无法显示transition动画会失效 visibility .hide-visibility{ visibility: hidden; }

特点

隐藏元素依然占据空间，影响其他元素的布局不会影响任何用户的交互通过DOM依然可以获取该元素，无法响应DOM事件其子孙元素可以通过重新设置visibility: visibile来显示 opacity .hide-opacity{ opacity: 0; }

特点

只是视觉上隐藏，隐藏的元素依然占据着空间，影响其他元素的布局依然能够响应用户的交互通过DOM依然可以获取该元素，可以响应DOM事件其子孙元素即使重新设置了opacity: 1也无法显示 hidden HEML5新增的hidden属性，可以直接隐藏元素。效果与特点与display一致我是被隐藏的元素 position .hide-position{ position: absolute top: -9999px left: -9999px }

特点：

视觉上隐藏，实际显示在屏幕的可视区之外，不会占据空间，不影响其他元素布局用户无法与其交互通过dom可以获得该元素其子孙元素无法通过重新设置对应的属性来显示 clip-path 通过裁剪元素来实现隐藏 .hide-clip { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }

特点：

视觉隐藏，隐藏元素占据空间，影响其他元素的布局用户无法与其进行交互通过dom可以获得该元素其子孙元素无法重新设置对应属性来显示 overflow .hide-overflow { width: 0; height: 0; overflow: hidden; }

特点：

视觉隐藏，不占据空间，不影响其他元素布局用户无法与其交互通过DOM可获得该元素子孙元素无法重新设置该属性来显示 transfrom .hide-transform{ transform: translate(-9999px, -9999px) } // 或者 .hide-transform{ transform: scale(0) }

特点：

视觉隐藏，占据空间，影响其他元素布局用户无法与其交互通过dom可以获得该元素其子孙元素无法重新设置该属性来显示真实隐藏

我理解的真实隐藏只有

display: nono 视觉隐藏

其他都是视觉隐藏

visibility: hiddenopacity: 0positiontransformclip-pathoverflow

【本文地址】

使一个dom不可见的几种方法

使一个dom不可见的几种方法

今日新闻

推荐新闻