数据API 产品矩阵 案例 关于
掌握聚合最新动态了解行业最新趋势
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

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
如何让HTML元素隐身
发布:2016-10-14 10:42:58

有的时候,我们都希望自己能隐身。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

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
电话 0512-88869195
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future