HTMLElement.hidden

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

HTMLElement property hidden 是 布尔 which is true if the element is hidden; otherwise the value is false . This is quite different from using the CSS property display to control the visibility of an element. hidden property applies to all presentation modes and should not be used to hide content that is meant to be directly accessible to the user.

Appropriate use cases for hidden include:

Content that isn't yet relevant but may be needed later
Content that was previously needed but is not any longer
Content that is reused by other parts of the page in a template-like fashion
Creating an offscreen canvas as a drawing buffer

Inappropriate use cases include:

Hiding panels in a tabbed dialog box
Hiding content in one presentation while intending it to be visible in others

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

句法

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

值

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%;
}

结果

规范

规范	状态	注释
HTML 实时标准 The definition of 'HTMLElement.hidden' in that specification.	实时标准
HTML 5.1 The definition of 'HTMLElement.hidden' in that specification.	推荐
HTML5 The definition of 'HTMLElement.hidden' in that specification.	推荐

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`hidden`	Chrome 6	Edge 12	Firefox 1	IE 11	Opera 11.6	Safari 6	WebView Android ≤37	Chrome Android 18	Firefox Android 4	Opera Android 12	Safari iOS 6	Samsung Internet Android 1.0

在此页

句法

值

范例

JavaScript

HTML

The welcome panel

The follow-up panel

CSS

结果

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题