---
title: HTMLElement.hidden
slug: Web/API/HTMLElement/hidden
translation_of: Web/API/HTMLElement/hidden
---
<div>
<div>{{ APIRef("HTML DOM") }}</div>
</div>

<p><span class="seoSummary">{{domxref("HTMLElement")}}元素属性 <strong><code>hidden</code></strong> 是一个 {{jsxref("Boolean")}}类型，如果想要隐藏文档，值设置为 <code>true，否则值设置为</code><code>false</code>.  这是完全不同于使用 CSS 属性 {{cssxref("display")}}  来控制一个元素的可见性 。</span>  <code>hidden 属性应用于所有的展现模式，并且不应该用来隐藏用户直接访问的内容。</code></p>

<p>适用于使用 <code>hidden 的情况：</code></p>

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

<p>不适合使用的情况：</p>

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

<div class="note">
<p>Elements that are not <code>hidden</code> must not link to elements which are.</p>
</div>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre class="syntaxbox"><em>isHidden</em> = <em>HTMLElement</em>.hidden;


<em>HTMLElement</em>.hidden = true | false;</pre>

<h3 id="Value">Value</h3>

<p>A Boolean which is <code>true</code> if the element is hidden from view; otherwise, the value is <code>false</code>.</p>

<h2 id="Example" name="Example">示例</h2>

<p>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.</p>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">document.getElementById("okButton")
        .addEventListener("click", function() {
  document.getElementById("welcome").hidden = true;
  document.getElementById("awesome").hidden = false;
}, false);</pre>

<p>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.</p>

<h3 id="HTML">HTML</h3>

<p>The HTML for the two boxes are shown here.</p>

<h4 id="The_welcome_panel">The welcome panel</h4>

<pre class="brush: html">&lt;div id="welcome" class="panel"&gt;
  &lt;h1&gt;Welcome to Foobar.com!&lt;/h1&gt;
  &lt;p&gt;By clicking "OK" you agree to be awesome every day!&lt;/p&gt;
  &lt;button class="button" id="okButton"&gt;OK&lt;/button&gt;
&lt;/div&gt;</pre>

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

<h4 id="The_follow-up_panel">The follow-up panel</h4>

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

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

<h3 id="CSS">CSS</h3>

<p>The content is styled using the CSS below.</p>

<pre class="brush: css">.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%;
}</pre>

<h3 id="Result">Result</h3>

<p>{{ EmbedLiveSample('Example', 560, 200) }}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容">浏览器兼容</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoDesktop("2") }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoMobile("2") }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li>{{domxref("Element.hidden")}}</li>
 <li>{{cssxref("display")}}</li>
</ul>