HTMLElement.hidden

HTMLElementhidden プロパティは Boolean  で、要素が非表示の場合は true で、それ以外の場合は false です。 これは、CSS プロパティの display を使用して要素の可視性を制御することとはまったく異なります。 hidden プロパティはすべてのプレゼンテーションモードに適用され、ユーザーが直接アクセスできるコンテンツを非表示にするために使用しないでください。

hidden の適切な使用例は次のとおりです。

  • まだ関連性はないが、後で必要になる可能性のあるコンテンツ
  • 以前は必要であったが、もはや存在しないコンテンツ
  • テンプレートのようにページの他の部分で再利用されるコンテンツ
  • 描画バッファとしてオフスクリーンのキャンバスを作成する

不適切な使用例には次のものがあります。

  • タブ付きダイアログボックスでのパネルの非表示
  • あるプレゼンテーションでコンテンツを非表示にし、他のプレゼンテーションでは表示されるようにする

hidden でない要素は、hidden 要素にリンクしてはいけません。

構文

isHidden = HTMLElement.hidden;


HTMLElement.hidden = true | false;

要素がビューから隠されている場合に true になる Boolean。 それ以外の場合、値は false です。

次に、非表示のブロックを使用して、ユーザーが珍しい要求に同意した後に表示されるお礼のメッセージを含める例を示します。

JavaScript

document.getElementById("okButton")
        .addEventListener("click", function() {
  document.getElementById("welcome").hidden = true;
  document.getElementById("awesome").hidden = false;
}, false);

このコードは、ウェルカムパネルを非表示にして、その場所に "awesome" という名前のフォローアップパネルを表示する、ウェルカムパネルの [OK] ボタンのハンドラを設定します。

HTML

2つのボックスの HTML は次のとおりです。

ウェルカムパネル

<div id="welcome" class="panel">
  <h1>Foobar.com へようこそ!</h1>
  <p>[OK] をクリックすると、あなたは毎日が素晴らしいことに同意します!</p>
  <button class="button" id="okButton">OK</button>
</div>

この HTML は、ユーザーをサイトに歓迎し、[OK] ボタンをクリックして同意していることを伝えるパネルを(<div> ブロック内に)作成します。

フォローアップパネル

ユーザーがウェルカムパネルの [OK] ボタンをクリックすると、JavaScript コードは2つのパネルのそれぞれの hidden の値を変更して2つのパネルを入れ替えます。 フォローアップパネルは、HTML では次のようになります。

<div id="awesome" class="panel" hidden>
  <h1>ありがとう!</h1>
  <p>今日は素晴らしいことに同意してくれてありがとう!
  さあ、世界をもっと素晴らしいものにするために、
  そこから出て、素晴らしいことをしてください!</p>
</div>

CSS

コンテンツは、以下の 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%;
}

結果

仕様

仕様 状態 コメント
HTML Living Standard
HTMLElement.hidden の定義
現行の標準
HTML 5.1
HTMLElement.hidden の定義
勧告
HTML5
HTMLElement.hidden の定義
勧告

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
hiddenChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1IE ? Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報