要素のスタイルプロパティ、getComputedStyle() メソッド、CSSOM を使いこなして、CSS を自在に操る

2024-04-08

JavaScript で CSS ルール値を読み取る方法

要素のスタイルプロパティを使用する

最も簡単な方法は、要素の style プロパティを使用することです。このプロパティには、要素に適用されているすべての CSS ルール値が含まれています。

const element = document.getElementById('myElement');
const color = element.style.color;
console.log(color); // #ff0000

この方法は、要素に適用されている単一の CSS プロパティ値を取得する場合に便利です。ただし、複数のプロパティ値を取得したり、CSS ルールがどのように定義されているかを判断したりするには、この方法は適していません。

getComputedStyle() メソッドを使用すると、要素に適用されているすべての CSS ルール値を取得できます。この方法は、要素のスタイルプロパティよりも詳細な情報を提供します。

const element = document.getElementById('myElement');
const styles = window.getComputedStyle(element);
const color = styles.color;
console.log(color); // #ff0000
const backgroundColor = styles.backgroundColor;
console.log(backgroundColor); // #ffffff

CSSOM を使用する

CSSOM (CSS Object Model) を使用すると、CSS ルールを DOM ツリーとして操作できます。この方法は、CSS ルールの構造と内容を詳細に制御する必要がある場合に便利です。

const stylesheet = document.styleSheets[0];
const rules = stylesheet.cssRules;

for (const rule of rules) {
  if (rule.selectorText === '.myClass') {
    const color = rule.style.getPropertyValue('color');
    console.log(color); // #ff0000
    break;
  }
}

この方法は、特定の CSS ルール値を取得したり、CSS ルールを動的に変更したりする場合に便利です。ただし、この方法は複雑で、習得するのに時間がかかる場合があります。

要素に適用されている単一の CSS プロパティ値を取得する場合は、要素の style プロパティを使用します。
CSS ルールの構造と内容を詳細に制御する必要がある場合は、CSSOM を使用します。

JavaScript で CSS ルール値を読み取るためのサンプルコード

要素のスタイルプロパティを使用する

const element = document.getElementById('myElement');
const color = element.style.color;
console.log(color); // #ff0000

このコードは、myElement IDを持つ要素の color プロパティ値を取得します。

getComputedStyle() メソッドを使用する

const element = document.getElementById('myElement');
const styles = window.getComputedStyle(element);
const color = styles.color;
console.log(color); // #ff0000
const backgroundColor = styles.backgroundColor;
console.log(backgroundColor); // #ffffff

CSSOM を使用する

const stylesheet = document.styleSheets[0];
const rules = stylesheet.cssRules;

for (const rule of rules) {
  if (rule.selectorText === '.myClass') {
    const color = rule.style.getPropertyValue('color');
    console.log(color); // #ff0000
    break;
  }
}

注:

上記のコードはほんの一例です。
実際の使用例では、要件に応じてコードを調整する必要があります。

JavaScript で CSS ルール値を読み取るその他の方法

MutationObserver オブジェクトを使用すると、DOM の変更を監視できます。この方法は、CSS ルールが動的に変更された場合に、その変更を検出して対応する場合に便利です。

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      const element = mutation.target;
      const color = element.style.color;
      console.log(color); // #ff0000
    }
  }
});

observer.observe(document.getElementById('myElement'), {
  attributes: true,
  attributeFilter: ['style'],
});

Shadow DOM は、Web コンポーネントで使用されるカプセル化された DOM です。Shadow DOM 内の CSS ルールにアクセスするには、Element.shadowRoot プロパティを使用する必要があります。

const element = document.getElementById('myElement');
const shadowRoot = element.shadowRoot;
const styles = shadowRoot.querySelector('style');
const color = styles.sheet.cssRules[0].style.getPropertyValue('color');
console.log(color); // #ff0000

注意事項