path: root/files/ru/web/api/htmlelement/hidden/index.html

---
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" name="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" name="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">&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>Этот  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">&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>Стилизованное содержимое использует 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>{{ 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>