HTMLElement.hidden

这篇翻译不完整。请帮忙从英语翻译这篇文章

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  

浏览器兼容

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)

相关链接

文档标签和贡献者

 此页面的贡献者: weiqinl
 最后编辑者: weiqinl,