hoverやbeforeなどのCSS擬似クラス・要素のスタイルをJavaScriptで変更する

CSSには :hover や :visited などの擬似クラス、 :before や :after などの擬似要素が用意されており、必要に応じてスタイルを適用することができます。

CSSプロパティはJavaScriptから操作することができますが、擬似クラスおよび擬似要素においては通常その手段がありません。しかし、工夫をすれば擬似クラス・擬似要素のスタイルをJSから変更することができます。

この記事では、JSから擬似クラス・擬似要素のCSSプロパティを間接的に操作する方法を紹介します。

JSはCSSの擬似クラス・擬似要素に直接アクセスすることはできませんが、CSS変数（カスタムプロパティ）にはアクセスすることができます。

つまり、変更したいスタイルをCSS変数で定義しておき、変数をJSから変更することで間接的に擬似クラス・擬似要素のスタイルを変更するという手段を取ります。

下記の例では、CSS変数をbody要素に定義し、定義した変数を対象となる要素で指定しています。

body {
  --main-color: brown;
}

a:hover {
  color: var(--main-color);
}

JSでCSS変数を操作するには CSSStyleDeclaration.setProperty() メソッドを用います。下記の例ではbody要素に設定した--main-color変数をredに変更しています。

document.body.style.setProperty('--main-color', 'red')

間接的にではありますが、これによってCSS擬似クラス・擬似要素のスタイルをJSから変更することができます。

以上です。この記事ではJSから擬似クラス・擬似要素のCSSプロパティを間接的に操作する方法を紹介しました。

💕

記事が参考になったら少額を寄付いただけると励みになります。