HTMLタグにhiddenを付ければ内容を非表示にできる

HTMLタグにhiddenを付ければ非表示にできる

HTMLタグにhiddenを付けて非表示に

HTML内で非表示にしたい箇所があるときはCSSでdisplay:noneを指定したりJavaScriptを使用する方法などがあるがタグにhidden属性を付けるやり方も存在する。

例えば現在以下のコードがこの下の部分に記述されているがhidden属性が追加されているため非表示になっている。

※hiddenが付いていなければ↓ここにhoge, fugaが表示される。

<div style="padding: 10px; background: #eee;">
<a hidden href="#">hoge</a>
<p hidden>fuga</p>
</div>

JavaScriptでhiddenを追加するにはsetAttributeで下記のように指定する。

var s = document.querySelector('.site-branding');
s.setAttribute('hidden', '');
カテゴリーhtml