JavaScriptでdisplay:noneを解除するには？
Webページの要素を非表示にする手段として、CSSの`display: none;`は非常に一般的です。しかし、JavaScriptを使って動的に要素を表示する必要がある場合、どのようにすれば`display: none;`を解除できるのでしょうか？
JavaScriptで`display: none;`を解除する方法
JavaScriptで`display: none;`を解除するには、要素の`style.display`プロパティを変更します。具体的には、以下の手順で行います。
- 解除したい要素を取得する
- 取得した要素の`style.display`プロパティに空文字列('')を設定する
コード例
<!DOCTYPE html>
<html>
<head>
<title>display:noneの解除</title>
</head>
<body>
<p id="myElement" style="display: none;">この要素は初期状態で非表示です。</p>
<button onclick="showElement()">要素を表示</button>
<script>
function showElement() {
// ID 'myElement'を持つ要素を取得
var element = document.getElementById('myElement');
// 要素のdisplayプロパティを空文字列に設定し、表示状態に戻す
element.style.display = '';
}
</script>
</body>
</html>
解説
1. `document.getElementById('myElement')`で、IDが`myElement`である要素を取得します。 2. 取得した要素の`style.display`プロパティに、空文字列(`''`)を代入します。 - `display: none;` を指定していた要素は、この操作によってデフォルトの表示状態に戻ります。 - デフォルトの表示状態は要素の種類によって異なり、例えば`<p>`タグは`display: block;`、`<span>`タグは`display: inline;`として扱われます。
displayプロパティの値
`display`プロパティには、要素の表示方法を指定する様々な値を設定できます。以下はよく使われる値です。
| 値 | 説明 |
|---|---|
none |
要素を非表示にする |
block |
ブロックレベル要素として表示する（改行あり） |
inline |
インライン要素として表示する（改行なし） |
inline-block |
インライン要素として表示するが、幅や高さを指定できる |
参考資料
* Document.getElementById() - Web API | MDN * display - CSS: カスケーディングスタイルシート | MDN
よくある質問
Q1: `style.display = 'block';` と `style.display = '';` の違いは何ですか？
A1: `style.display = 'block';` は要素をブロックレベル要素として表示しますが、`style.display = '';` は要素のデフォルトの表示状態に戻します。要素の種類によってデフォルトの表示状態が異なるため、`style.display = '';` を使う方が柔軟性があります。
Q2: JavaScriptで要素を非表示にするにはどうすれば良いですか？
A2: `element.style.display = 'none';` とすることで要素を非表示にできます。
Q3: jQueryで`display:none;`を解除するにはどうすれば良いですか？
A3: jQueryでは `$('#myElement').show();` を使用します。`show()` メソッドは、要素のデフォルトの表示状態に戻す働きをします。
その他の参考記事:jquery display 切り替え