hidden属性

hidden属性とは

hiddenは、ページの内容に関係ない要素を非表示にする時に使います。

グローバル属性のため、すべてのHTML要素で使えます。

なお、hidden属性を指定していても、CSSのdisplayプロパティの値によっては表示されます。例えば、display:block;など宣言した場合です。

利用例

hiddenの利用例は、以下のとおりです。

<button onclick="func1()">休憩</button>
<span hidden id="test">休憩用コラムです。</span>

<script>
function func1() {
  document.getElementById("test").hidden = false;
}
</script>

「休憩用コラムです。」は、最初ブラウザ上で表示されません。「休憩」ボタンをクリックすると、JavaScriptでhidden属性が削除されて、表示されるようになります。

実行例

実行例は、以下のとおりです。

留意点

hidden属性が設定された要素にリンクすることや、一部の環境から見た時だけ非表示にするといった使い方は、推奨されません。

hidden属性は、ページと関係ないコンテンツを非表示にする時に使います。最初は非表示でも、関係することになった時に表示したり、逆に関係しなくなった時に非表示にしたりします。

ページに関係する内容を一時的に非表示にする場合は、CSSのdisplayプロパティなどで行います。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。