プレーンなJavaScriptでDOM要素を表示・非表示にする方法

バニラJavaScript（プレーンなJavaScript）だけでも、DOM要素を簡単に非表示・表示できます。この記事では、その基本的な方法を実例付きでわかりやすく解説します。

styleプロパティとは

JavaScriptには、その名もずばり style というプロパティが用意されています。このプロパティを使えば、CSSと同じように要素へCSSプロパティを設定し、自由にスタイリングすることが可能です。早速試してみましょう。

DOM要素を非表示にする方法

JavaScriptでDOM要素を非表示にするには、display プロパティに "none" を設定します。

element.style.display = "none"

DOM要素を再表示する方法

非表示にした要素を再び表示したい場合は、値を "block" に戻すだけです。

element.style.display = "block"

注意： 対象の要素が元々 inline や inline-block として表示されていた場合は、上記の "block" をそれぞれの値に置き換えてください。そのまま block を指定すると、レイアウトが崩れる原因になることがあります。

実践的な例

ここまでの例で登場した element は、あくまで汎用的なプレースホルダーです。実際にJavaScriptの style プロパティを活用するには、まずスタイルを適用したいDOM要素を取得する必要があります。

例えば、ページから消したい cta-button というクラス名のボタンがあるとしましょう。このボタンを非表示にするコードは次のとおりです。

const ctaButton = document.querySelector(".cta-button")

ctaButton.style.display = "none"

補足：表示・非表示を切り替えるテクニック

ボタンのクリックなどで表示・非表示を交互に切り替えたい場合は、classList とCSSクラスを組み合わせる方法も便利です。

// CSS側の定義例
// .hidden { display: none; }

const button = document.querySelector(".cta-button")

button.addEventListener("click", () => {
  button.classList.toggle("hidden")
})

このように、JavaScriptから直接スタイルを操作する方法と、CSSクラスの付け外しで制御する方法の2通りがあります。用途に応じて使い分けることで、コードの可読性と保守性が向上します。