HTMLElement.hidden

HTMLElement元素属性 hidden 是一个 Boolean类型，如果想要隐藏文档，值设置为 true，否则值设置为false.  这是完全不同于使用 CSS 属性 display  来控制一个元素的可见性 。  hidden 属性应用于所有的展现模式，并且不应该用来隐藏用户直接访问的内容。

适用于使用 hidden 的情况：

• 目前不相关的内容，但是将来会用到的
• 以前需要，但是现在不需要的内容
• 以一种模版的方式存在，在一个页面的其他地方重复使用到
• Creating an offscreen canvas as a drawing buffer

不适合使用的情况：

• 隐藏 标签选项卡对话框面板
• 在一个演示文稿中隐藏内容，同时打算在其他演示文稿中显示

语法

isHidden = HTMLElement.hidden;
HTMLElement.hidden = true | false;

Value

A Boolean which is true if the element is hidden from view; otherwise, the value is false.

示例

Here's an example where a hidden block is used to contain a thank you message that is displayed after a user agrees to an unusual request.

JavaScript

document.getElementById("okButton")
        .addEventListener("click", function() {
  document.getElementById("welcome").hidden = true;
  document.getElementById("awesome").hidden = false;
}, false);

This code sets up a handler for the welcome panel's "OK" button that hides the welcome panel and makes the follow-up panel—with the curious name "awesome"—visible in its place.

HTML

The HTML for the two boxes are shown here.

The welcome panel

<div id="welcome" class="panel">
  <h1>Welcome to Foobar.com!</h1>
  <p>By clicking "OK" you agree to be awesome every day!</p>
  <button class="button" id="okButton">OK</button>
</div>

This HTML creates a panel (in a <div> block) that welcomes the user to a site and tells them what they're agreeing to by clicking the OK button.

The follow-up panel

Once the user clicks the "OK" button in the welcome panel, the JavaScript code swaps the two panels by changing their respective values for hidden. The follow-up panel looks like this in HTML:

<div id="awesome" class="panel" hidden>
  <h1>Thanks!</h1>
  <p>Thank you <strong>so</strong> much for agreeing to be
  awesome today! Now get out there and do awesome things
  awesomely to make the world more awesome!</p>
</div>

CSS

The content is styled using the CSS below.

.panel {
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border: 1px solid #22d;
  padding: 12px;
  width: 500px;
  text-align: center;
}
.button {
  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
  padding: 5px 36px;
}
h1 {
  margin-top: 0;
  font-size: 175%;
}

Result

规范

浏览器兼容

相关链接

• Element.hidden
• display