diff options
Diffstat (limited to 'files/zh-cn/web/api/htmlelement/hidden/index.html')
| -rw-r--r-- | files/zh-cn/web/api/htmlelement/hidden/index.html | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/htmlelement/hidden/index.html b/files/zh-cn/web/api/htmlelement/hidden/index.html new file mode 100644 index 0000000000..5fd6033dc5 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/hidden/index.html @@ -0,0 +1,196 @@ +--- +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"><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></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"><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></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> |