掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

如何让HTML元素隐身

有的时候,我们都希望自己能隐身。HTML元素其实也是这样。有的时候,它们也想藏起来一段时间。并不是完全被删除——而是暂时隐身一会儿。

还好,CSS为我们提供了多种方式,让HTML元素消失一段时间。

实现隐身的CSS


我们现在选一个HTML元素,把它的类指定为“ghost(幽灵),然后让它隐身。

 //index.html

<div class=”ghost”>

  <p>I’m friendly!</p>

</div>

//style.css

.ghost {

}

死亡像素


默认情况下,HTML元素都是可见的。它们默认的CSS可见性(visibility)属性是可见的,但是你可以做点改变:

 .ghost {

  visibility: hidden;

}

现在这个幽灵就彻底隐身了,但是它依然会占据页面上的位置。

消失无踪


如果你想让某个元素彻底消失,连页面上的空间都不出现,你可以使用CSSdisplay属性。

一般情况下,开发者会有display属性来定义一个HTML元素是要以block元素的形式出现,还是以inline元素的形式出现。但是其实,它还可以用来彻底隐藏元素:

 .ghost {

  display: none;

}

与可见性,这种方式操作之后,元素不会占据页面上的空间。

透明度



你还可以使用CSSopacity(透明度)属性让元素彻底透明:

 .ghost {

  opacity: 0.0;

}

visibility: hidden一样,opacity: 0.0这种做法尽管会让元素小时,但是它依然会占据空间,在页面上留下一块空白。请记住,使用上述方法的时候,元素依然是DOM的一部分——只不过普通用户无法在浏览器中看到他们。

跑远点,再远点,再远点……

隐藏元素的一个终极打法,就是将它移动到离页面非常非常远的地方,你必须要疯狂缩放页面才能看到它。

要想做到这一点,首先你需要使用CSSposition(定位)属性,给元素在页面上指定一个绝对位置。

然后,你要用一个非常大的数字,来将元素移动到页面的可视范围之外:

 .ghost {

  position: absolute;

  left: -999999px;

}

这么做有什么实际意义?有的时候,它能够提升内容的无障碍性。例如屏幕阅读器——盲人用户使用这个东西来收听浏览器中的内容——可以拾取这个内容,而其他用户则无法看到。

要想获得最好的结果,你应该将这些元素移动到页面的左侧,而不要移动到顶端或是最下面,否则会混淆屏幕阅读器。

sdk.jpg

原文来自:sdk

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

0512-88869195
数 据 驱 动 未 来
Data Drives The Future