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
|
---
title: HTMLElement.hidden
slug: Web/API/HTMLElement/hidden
translation_of: Web/API/HTMLElement/hidden
---
<div>
<div>HTMLElement <span class="seoSummary">Свойство <strong><code>hidden</code></strong> является {{jsxref("Boolean")}} типом данных , который принимает значение true , если содержимое спрятано, в противном случае значение будет false. Это свойство совершенно отличается от использования CSS-свойства {{cssxref("display")}} , чтобы контролировать отображение элемента.Свойство </span><code>hidden</code> <span class="seoSummary">применимо ко всем режимам представления и не должно использоваться для скрытия содержимого предназначенного для прямого доступа к пользователю. Соответствующие варианты использования включают:</span></div>
</div>
<ul>
<li> Содержимое, которое не является особенно важным, но может быть необходимо позже</li>
<li>Содержимое, которое было раньше необходимо, но больше нет в нем необходимости</li>
<li>Содержимое, которое повторно используется другими частями страницы по шаблону</li>
<li>Создание заставного холста в качестве буфера рисования</li>
</ul>
<p>Неуместные варианты использования включают:</p>
<ul>
<li>Скрытие панелей в диалоговом окне с вкладками</li>
<li>Скрытие содержимого в одной презентации, предполагая, что оно будет видимым в других</li>
</ul>
<div class="note">
<p>Элементы, которые не hidden не должны ссылаться на элементы которые hidden.</p>
</div>
<h2 id="Syntax">Синтаксис</h2>
<pre class="syntaxbox"><em>isHidden</em> = <em>HTMLElement</em>.hidden;
<em>HTMLElement</em>.hidden = true | false;</pre>
<h3 id="Значение">Значение</h3>
<p>Если элемент спрятан, то значение <em><strong>true</strong></em>, в противном случае <em><strong>false</strong></em>; </p>
<h2 id="Example">Пример</h2>
<p>Пример, где скрытый блок используется для хранения "thank you" сообщения, которое отображается после того, как пользователь соглашается с необычным запросом.</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>Этот код устанавливает обработчика для кнопки "OK", которая скрывает панель приветствия и делает The follow-up panel панель с необычным именем "awesome" - видимой в этом месте.</p>
<h3 id="HTML">HTML</h3>
<p>HTML-код для двух boxes показанных здесь.</p>
<h4 id="Welcome_panel">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>Этот HTML создаёт панель, которая приветствует пользователей на сайте и рассказывает им о том с чем они соглашаются нажимая на кнопку OK.</p>
<h4 id="The_follow-up_panel">The follow-up panel</h4>
<p>После того, как пользователь нажимает OK в welcome panel, JavaScript-код меняет две панели изменяя их значения hidden. Следующая The follow-up panel представлена в этом HMTL:</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>Стилизованное содержимое использует CSS представленное внизу.</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="Результат">Результат</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>{{Compat}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{domxref("Element.hidden")}}</li>
<li>{{cssxref("display")}}</li>
</ul>
|
