DOM

：

：

HTMLElement.hidden プロパティ

　編集：2022.10.02 by T.A.

[Edge]。→

element の表示状態（表示／非表示）を取得／設定します。これは、CSS プロパティの display を使用して要素の可視性を制御することとはまったく異なります。

HTML属性：hidden

hidden プロパティはすべてのプレゼンテーション モードに適用され、ユーザーが直接アクセスできるコンテンツを非表示にするために使用しないでください。

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

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

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

構文
element.hidden
element HTMLElement。
値

真偽値。true：要素がビューから隠されている／隠す。false：それ以外。

例
mdnより

ユーザーが珍しい要求に同意した後に表示されるお礼のメッセージを含める例を示します。

JavaScript： 

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

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

HTML： ウェルカムパネル 

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

HTML： フォローアップパネル

ユーザーがウェルカムパネルの [OK] ボタンをクリックすると、JavaScript コードは2つのパネルのそれぞれの hidden の値を変更して2つのパネルを入れ替えます。 

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

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： 

開始<SPAN id=IdTest>SPAN要素1</SPAN>終了<BR>
開始<SPAN id=IdTest2>SPAN要素2</SPAN>終了<BR>
開始SPAN要素1終了
開始SPAN要素2終了

JavaScript： 

IdTest.hidden=true;
D=IdTest.hidden;   //＝[boolean]：true
IdTest2.style.display="none";
D=IdTest2.style.display; //＝[string]：none
開始終了
開始終了

DIV要素でやってみても同じだった。

関連

CSS：visibility

テスト