元素.隐藏变量可移植性

Element.hidden variable portability

本文关键字：可移植性 变量 隐藏 元素      更新时间：2023-09-26

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

我也使用谷歌浏览器作为我的主要测试等浏览器，并注意到所有可见元素似乎都有一个名为"隐藏"的属性，它持有一个布尔值。

就像你期望的那样，当设置为True时隐藏，当设置为False时可见。

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

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

由于我的Google-fu没有能够找到任何关于这方面的信息，这里有人知道为什么这似乎是工作，有多少其他浏览器支持这个吗?

我要补充的是，我正在建设的这个网站是为我个人使用，所以跨浏览器兼容性是不打算的，但将是一个很好的副作用。

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

这个Boolean属性表明元素还不是，或者不再是相关的。例如，它可以用来隐藏页面中在登录过程完成之前无法使用的元素。浏览器不会呈现这样的元素。

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

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

你所做的和你所做的是一样的:

<div hidden="true"></div>

但是我建议你这样做:

document.getElementById('question').style.display = 'none';
相关文章：