JavaScriptでWebページを動的に変える！CSSプロパティの操作方法を徹底解説

2024-06-05

JavaScript で CSS プロパティを設定する方法

CSS プロパティを設定する方法はいくつかあります。

style プロパティを使用する

最も基本的な方法は、要素の style プロパティを使用する方法です。このプロパティは、要素のすべての CSS プロパティにアクセスして設定することができます。

const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '20px';

このコードは、myElement IDを持つ要素のテキストの色を赤色、フォントサイズを 20 ピクセルに設定します。

classList プロパティを使用すると、要素に CSS クラスを追加したり削除したりすることができます。CSS クラスには、あらかじめ定義されたスタイルが含まれているため、style プロパティを使用するよりも簡潔に記述できます。

const element = document.getElementById('myElement');
element.classList.add('my-class');

このコードは、myElement IDを持つ要素に my-class という CSS クラスを追加します。このクラスには、color: red; や font-size: 20px; などのスタイルが定義されている必要があります。

setProperty() 関数は、CSS プロパティの名前と値を指定して設定することができます。この方法は、ベンダープレフィックス付きのプロパティを設定する場合などに便利です。

const element = document.getElementById('myElement');
element.style.setProperty('--my-variable', 'red');

このコードは、myElement IDを持つ要素の --my-variable という CSS カスタムプロパティの値を赤色に設定します。

CSSOM を使用する

CSSOM (CSS Object Model) を使用すると、CSS スタイルシートをプログラムで操作することができます。この方法は、より高度な操作が必要な場合に使用されます。

const sheet = document.styleSheets[0];
const rule = sheet.addRule('#myElement', 'color: red; font-size: 20px;');

簡単な変更の場合は、style プロパティを使用するのが最も簡単です。
既存の CSS クラスを使用する場合は、classList プロパティを使用します。
ベンダープレフィックス付きのプロパティを設定する場合は、setProperty() 関数を使用します。
より高度な操作が必要な場合は、CSSOM を使用します。

JavaScript で CSS プロパティを設定するサンプルコード

style プロパティを使用する

// 要素の背景色を赤色に設定
const element = document.getElementById('myElement');
element.style.backgroundColor = 'red';

// 要素のフォントサイズを 20 ピクセルに設定
element.style.fontSize = '20px';

// 要素のボーダーを 1 ピクセルの黒色で設定
element.style.border = '1px solid black';

classList プロパティを使用する

// 要素に 'my-class' という CSS クラスを追加する
const element = document.getElementById('myElement');
element.classList.add('my-class');

// 要素から 'my-class' という CSS クラスを削除する
element.classList.remove('my-class');

// 要素に 'my-class' という CSS クラスが存在するかどうかを確認する
if (element.classList.contains('my-class')) {
  // 要素に 'my-class' クラスが存在する場合の処理
}

setProperty() 関数を使用する

// 要素にベンダープレフィックス付きのプロパティを設定
const element = document.getElementById('myElement');
element.style.setProperty('-webkit-transition', 'all 0.5s ease');

// 要素にカスタムプロパティを設定
element.style.setProperty('--my-variable', 'red');

CSSOM を使用する

// 要素に CSS ルールを追加する
const sheet = document.styleSheets[0];
const rule = sheet.addRule('#myElement', 'color: red; font-size: 20px;');

// 要素から CSS ルールを削除する
sheet.deleteRule(rule.index);

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

上記のコードは、すべてデモ用であり、本番環境で使用する前に適切にテストする必要があります。
JavaScript で CSS を操作する際には、パフォーマンスとアクセシビリティを考慮することが重要です。
より複雑な操作については、ライブラリを使用すると便利です。

JavaScript で CSS プロパティを設定するその他の方法

MutationObserver オブジェクトを使用して、要素のスタイル変更を監視し、それに応じて処理を実行することができます。この方法は、要素のスタイルがいつ、どのように変更されたかを追跡する必要がある場合に便利です。

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      // 要素のスタイルが変更されたときの処理
    }
  }
});

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

CSSStyleSheet.insertRule() メソッドを使用して、スタイルシートに新しい CSS ルールを挿入することができます。この方法は、動的に新しいスタイルを追加する必要がある場合に便利です。

const sheet = document.styleSheets[0];
sheet.insertRule('#myElement { color: red; font-size: 20px; }', 0);

CSSFontFace API を使用して、Web フォントを動的に読み込むことができます。この方法は、カスタムフォントを使用する必要がある場合に便利です。

const fontFace = new FontFace('MyFont', 'url(myfont.woff)');
document.fonts.add(fontFace);

const element = document.getElementById('myElement');
element.style.fontFamily = 'MyFont';

Shadow DOM を使用して、要素のスタイルをカプセル化することができます。この方法は、コンポーネント開発や、スタイルの干渉を避けたい場合に便利です。

const shadow = element.attachShadow({ mode: 'open' });
shadow.innerHTML = `
  <style>
    #my-content {
      color: red;
      font-size: 20px;
    }
  </style>
  <div id="my-content">コンテンツ</div>
`;

これらの方法は、それぞれ異なるユースケースに適しています。状況に合わせて適切な方法を選択してください。