html - Element.hidden 变量可移植性

Question

我正在为我正在设计的个人网站编写模板页面，我将使用下拉 DIV 标记作为登录表单。

我还使用谷歌浏览器作为我的主要测试等浏览器，并注意到所有可见元素似乎都有一个名为“隐藏”的属性，该属性包含一个 bool 值。

它的工作方式与您预期的一样，设置为 True 时隐藏，设置为 False 时可见。

document.getElementById("element").hidden = true;
document.getElementById("element").hidden = false;

奇怪的是，即使是 Firefox 8.0.1 也以同样的方式处理这个问题。

由于我的 Google-fu 无法找到关于此的任何信息，这里有没有人知道为什么这似乎有效，还有多少其他浏览器支持它？

我要补充一点，我正在构建的这个网站是供我个人使用的，因此跨浏览器兼容性不是有意的，但这会是一个很好的副作用。

Answer 1

hidden 是 HTML5 中引入的一个新的全局属性。这意味着浏览器支持在现代浏览器中应该相当好，尽管在 IE8 和可能的 IE9 中不支持它。顺便说一句，您对 hidden 属性的使用可能不正确。

This Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements.

您的登录表单不是不再相关的页面的一部分，而是作为演示文稿的一部分简单地隐藏起来。因此，您应该为此使用 CSS。有关详细信息，请参阅:

• 相关 MDN 文章:https://developer.mozilla.org/en/HTML/Global_attributes#attr-hidden
• HTML5 规范:http://developers.whatwg.org/editing.html#the-hidden-attribute