JavaScriptでCSSを動的に追加する方法を徹底解説！初心者でも安心のサンプルコード付き

2024-06-13

JavaScript で CSS を追加する方法

styleプロパティを使用する

これは、最も簡単で基本的な方法です。対象要素の style プロパティに、直接CSSプロパティと値を記述することで、スタイルを適用します。

const element = document.getElementById('target');
element.style.backgroundColor = 'red';
element.style.fontSize = '20px';

className を使用する

あらかじめCSSで定義しておいたクラスを、JavaScript で要素に付与することで、スタイルを適用します。

.red-background {
  background-color: red;
}

.large-font {
  font-size: 20px;
}

const element = document.getElementById('target');
element.classList.add('red-background', 'large-font');

style要素を動的に生成する

document.createElement() メソッドを使用して、新しい <style> 要素を生成し、その中にCSSルールを記述して、head 要素に追加します。

const styleTag = document.createElement('style');
styleTag.textContent = `
  #target {
    background-color: red;
    font-size: 20px;
  }
`;
document.head.appendChild(styleTag);

補足

上記以外にも、ライブラリを使用する方法もあります。
動的にCSSを変更する場合は、パフォーマンスやメンテナンス性を考慮する必要があります。
重要度の高いスタイルは、HTMLやCSSファイルで定義しておくことをおすすめします。

JavaScript で CSS を追加するサンプルコード

styleプロパティを使用する

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript で CSS を追加</title>
</head>
<body>
  <p id="target">元のテキスト</p>

  <script>
    const element = document.getElementById('target');
    element.style.backgroundColor = 'red';
    element.style.fontSize = '20px';
  </script>
</body>
</html>

このコードを実行すると、#target 要素の背景色が赤色になり、フォントサイズが20pxになります。

className を使用する

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript で CSS を追加</title>
  <style>
    .red-background {
      background-color: red;
    }

    .large-font {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p id="target">元のテキスト</p>

  <script>
    const element = document.getElementById('target');
    element.classList.add('red-background', 'large-font');
  </script>
</body>
</html>

このコードを実行すると、#target 要素に red-background と large-font というクラスが追加され、それに定義されたスタイルが適用されます。

style要素を動的に生成する

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript で CSS を追加</title>
</head>
<body>
  <p id="target">元のテキスト</p>

  <script>
    const styleTag = document.createElement('style');
    styleTag.textContent = `
      #target {
        background-color: red;
        font-size: 20px;
      }
    `;
    document.head.appendChild(styleTag);
  </script>
</body>
</html>

このコードを実行すると、<head> 要素内に新しい <style> 要素が生成され、その中に #target 要素に対するCSSルールが記述されます。

これらのサンプルコードはあくまでも基本的な例であり、状況に応じて様々な応用が可能です。

JavaScript で CSS を追加するその他の方法

CSSOM を操作する

CSS Object Model (CSSOM) を操作することで、既存のスタイルルールを直接変更したり、新しいスタイルルールを挿入したりすることができます。

const element = document.getElementById('target');
const style = element.style;
style.setProperty('background-color', 'red');
style.setProperty('font-size', '20px');

MutationObserver を使用して、DOMに変更が加えられたときにイベントを発生させ、そのイベントハンドラ内で CSS を変更することができます。

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === 'childList') {
      for (const addedNode of mutation.addedNodes) {
        if (addedNode.tagName === 'P') {
          addedNode.style.backgroundColor = 'red';
          addedNode.style.fontSize = '20px';
        }
      }
    }
  }
});

observer.observe(document.body, { childList: true });

Shadow DOM を使用して、要素にカプセル化された独自の CSS スコープを作成することができます。

const element = document.getElementById('target');
const shadowRoot = element.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    :host {
      background-color: red;
    }

    p {
      font-size: 20px;
    }
  </style>

  <p>コンテンツ</p>
`;

ライブラリを使用する

JavaScript には、CSS の操作を簡略化するためのライブラリがいくつかあります。例えば、JQuery や Vue.js などのライブラリは、独自の CSS 操作 API を提供しています。

これらの方法は、それぞれ異なる特性と利点を持っています。状況に応じて適切な方法を選択することが重要です。