要素の状態に合わせてスタイルを変える：JavaScriptによるCSS疑似クラスルールの制御

2024-04-08

JavaScriptからCSS疑似クラスルールを設定する

JavaScriptを使用して、HTML要素にCSS疑似クラスルールを動的に設定することができます。これは、要素の状態やユーザーとのやり取りに基づいて、要素のスタイルを変化させるのに役立ちます。

方法

以下の方法で、JavaScriptからCSS疑似クラスルールを設定できます。

classList プロパティは、要素のクラスリストを取得および変更するために使用できます。以下の例では、hover 疑似クラスルールを要素に追加します。

const element = document.getElementById('my-element');

element.classList.add('hover');

style プロパティは、要素のスタイルを直接設定するために使用できます。以下の例では、hover 疑似クラスルールの background-color プロパティを設定します。

const element = document.getElementById('my-element');

element.style.backgroundColor = 'red';

setAttribute() メソッドは、要素の属性を設定するために使用できます。以下の例では、data-hover 属性を設定し、その値を true に設定します。

const element = document.getElementById('my-element');

element.setAttribute('data-hover', 'true');

CSSStyleSheet オブジェクトは、スタイルシートを作成および編集するために使用できます。以下の例では、新しいスタイルシートを作成し、hover 疑似クラスルールを追加します。

const styleSheet = new CSSStyleSheet();

styleSheet.insertRule('.hover { background-color: red; }');

document.head.appendChild(styleSheet);

使用例

マウスホバー時に要素の色を変える
フォーム要素にフォーカスが当たった時に背景色を変える
クリックされた要素をアクティブ状態にする

注意点

疑似クラスルールは、要素の状態に基づいて適用されます。JavaScriptを使用して設定しても、要素の状態が変わらなければ適用されません。
複数の方法を組み合わせて使用することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  <div id="my-element">要素</div>

  <script>
    const element = document.getElementById('my-element');

    // マウスホバー時に要素の色を変える
    element.addEventListener('mouseenter', () => {
      element.classList.add('hover');
    });

    element.addEventListener('mouseleave', () => {
      element.classList.remove('hover');
    });
  </script>

  <style>
    .hover {
      background-color: red;
    }
  </style>
</body>
</html>

このコードを実行すると、#my-element 要素にマウスを近づけると、要素の背景色が赤くなります。

以下のリンクから、JavaScriptを使用してCSS疑似クラスルールを設定するその他のサンプルコードを見つけることができます。

JavaScriptからCSS疑似クラスルールを設定する他の方法

Element.prototype.matches() メソッドは、要素が指定されたセレクターに一致するかどうかを判断するために使用できます。以下の例では、hover 疑似クラスルールが要素に適用されているかどうかをチェックします。

const element = document.getElementById('my-element');

if (element.matches(':hover')) {
  // ...
}

MutationObserver オブジェクトは、DOMツリーの変更を監視するために使用できます。以下の例では、hover 疑似クラスルールが要素に追加されたかどうかを監視します。

const element = document.getElementById('my-element');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      if (element.classList.contains('hover')) {
        // ...
      }
    }
  });
});

observer.observe(element, { attributes: true });