1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
---
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>
{{Compat("api.HTMLElement.hidden")}}
<h2 id="相关链接">相关链接</h2>
<ul>
<li>{{domxref("Element.hidden")}}</li>
<li>{{cssxref("display")}}</li>
</ul>
|
