西西图吧

三种隐藏HTML元素的方式 html隐藏地址栏

时间:2019-06-08 18:45:12作者:小蓝关注:1栏目:科技

在网页应用中,显示/隐藏某个元素或组件是一件经常要做的事情,尤其是在目前比较流行的单页应用中。

总体而言,有 3 种方式来实现

CSS 的 display: none;

CSS 的 visibility: hidden;

HTML5 的 hidden 属性(boolean)

它们之间有相同点和不同点。相同点很简单,都能使添加了这个属性的元素及其子元素『不被看见』。这篇文章着重来比较一下它们之间的差异。

display: none;

添加了这个属性的元素:

不占据页面空间(不影响布局),因为这个属性不是让这个元素『不可见』,而是压根没有把它渲染出来

依旧可以通过 DOM API 来获取到

比如把它变成 display: block;

visibility: hidden;

添加了这个属性的元素:

仍占据页面空间(影响布局),仅仅让元素变“透明”,不画出来罢了

依旧可以通过 DOM API 来获取到

比如把它变成 visibility: visible;

HTML5 hidden

E.g. <p hidden>hello, world!</p>
添加了这个属性的元素:

不占据页面空间(不影响布局),未被渲染出来

什么情况下使用?

当这个元素和当前页面状态不相关时

这个元素仅仅用来被页面中的其它元素重复使用,提供某种信息,而非直接展示给用户使用时

总之,当此元素不应该被用户获取到时使用。(因此,不能把此元素链接给某个 href 上)

对比 display: none; 的优势在于,如果使用 display: none;,想要恢复显示时,该恢复成哪个值呢?block 吗?flex 吗?不好确定。但是使用 HTML5 的 hidden 属性就不存在这个问题了。

在易用性(Accessibility)方面,标注了 hidden 的元素不会被读屏器读到。

由于这个属性其实是用 CSS 实现的,所以,如果你给带有 HTML hidden 属性的元素,添加了 CSS display 属性,这个 display 属性会覆盖掉 HTML hidden 属性。

有英文阅读能力的同学可以去 W3C文档 查看更详细的解释和用例

文档上摘取的用例之一:

<h1>The Example Game</h1>
<section>
<h2>Login</h2>
<form>
...
<!-- 调用 login() 当用户的身份被成功检测时 -->
</form>
<script>
function login() {
// switch screens
document.getElementById('login').hidden = true;
document.getElementById('game').hidden = false;
}
</script>
</section>
<section hidden>
...
</section>
总结

每种用法都有自己的优势和劣势,需要根据具体的业务场景来选择用哪一种方式。
如有错误或遗漏,欢迎指出,谢谢!

本文标签:科技

西西图吧 | 关于我们 | 联系我们 | 合作加盟 | 服务协议 | 法律声明 | 澳门赌博官网 | 网站地图

提示:本站信息仅供参考,不能作为任何事项的依据;请谨慎参阅,本站不承担由此引起的法律责任。

Copyright © 2013-2018 All Rights Reserved

蜀ICP备17021134号-4