プレーンJavaScriptでDOM要素を表示および非表示にする方法

プレーンなバニラJavaScriptを使用してDOM要素を表示および非表示にする方法を学びます。

JavaScriptには、styleと呼ばれるstyleプロパティがあります。 、要素にCSSプロパティを設定し、CSSの場合と同じようにスタイルを設定するために使用できます。やってみましょう！

JavaScriptでDOM要素を非表示にする方法は次のとおりです。

element.style.display = "none"

DOM要素を再度表示するには：

element.style.display = "block"

注：DOM要素が元々inlineに設定されていた場合 またはinline-block 、blockを置き換えるだけです 上記の値とそれらの値のいずれか。

実際の例

上記の例では、element 単なる一般的なプレースホルダーです。 JavaScriptのstyleを使用するには 実用的な意味でのプロパティでは、最初にスタイルを設定するDOM要素を選択する必要があります。

DOMから削除するcta-buttonというボタンがあるとします。 。あなたはこのようにそれをするでしょう：

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

ctaButton.style.display = "none"