HTMLElement.hidden - Web API 接口参考 编辑

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

适用于使用 hidden 的情况：

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

不适合使用的情况：

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

Elements that are not hidden must not link to elements which are.

语法

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

规范

Specification	Status	Comment
HTML Living Standard HTMLElement.hidden	Living Standard
HTML 5.1 HTMLElement.hidden	Recommendation
HTML5 HTMLElement.hidden	Recommendation

浏览器兼容

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	4.0 (2)	(Yes)	(Yes)	(Yes)

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	(Yes)	4.0 (2)	(Yes)	(Yes)	(Yes)

相关链接

• Element.hidden
• display