HTML要素に適用されたスタイルを取得する

HTML要素に適用されたCSSの値を取得する

特定のHTML要素に適用されているCSSの値を取得したいときは、getComputedStyleメソッドかgetPropertyValueメソッドを使います。

getComputedStyleメソッドはパラメータに対象となるHTML要素を渡し、メソッドに続いて値を取得したいCSSプロパティ名を指定します。

もう1つのgetPropertyValueメソッドは先ほどのgetComputedStyleメソッドと組み合わせて使います。
こちらのメソッドはパラメータにCSSプロパティ名を指定すると、その値を取得することができます。

今回は解説用に以下のHTMLコードを使って、HTML要素に適用されたCSSを取得していきます。

HTML コード例

<article id="content1">
	<h1>JavaScriptレシピ</h1>
	<p id="p1">テキストテキストテキスト</p>
</article>

このHTMLコードには、以下のCSSが適用されていることとします。

CSS コード例

#content1 {
  padding: 20px;
  background-color: #f7f7f7;
}
#content1 p {
  color: #00c;
  font-size: 150%;
}

以降は、それぞれのメソッドを使い方を個別に解説していきます。

getComputedStyleメソッドでCSSの値を取得する

getComputedStyleメソッドは対象となるHTML要素を渡して、取得したいCSSプロパティ名を指定すると値を取得することができます。

以下の例では、上記のHTMLコードからarticle要素とp要素を取得し、それぞれに適用されているCSSの値を取得して出力します。

JS コード例

// HTML要素を取得
let article_element = document.getElementById("content1");
let p1_element = document.getElementById("p1");

// article要素のCSSを出力
console.log(getComputedStyle(article_element).padding); // 20px
console.log(getComputedStyle(article_element).backgroundColor); // rgb(247, 247, 247)

// p要素のCSSを出力
console.log(getComputedStyle(p1_element).color); // rgb(0, 0, 204)
console.log(getComputedStyle(p1_element).fontSize); // 24px

CSSのプロパティ名は「padding-left」のように2つ以上の単語がある場合、「–」の代わりに2つ目の単語の頭文字を大文字にして「paddingLeft」のように指定します。

getComputedStyleメソッドはwindowオブジェクトのメソッドなので、以下のように呼び出すこともできます。

JS コード例

// HTML要素を取得
let article_element = document.getElementById("content1");
let p1_element = document.getElementById("p1");

// article要素のCSSを出力
console.log(window.getComputedStyle(article_element).padding); // 20px

windowオブジェクトはグローバルオブジェクトなので省略可能です。

getPropertyValueメソッドでCSSの値を取得する

getPropertyValueメソッドは、先ほどのgetComputedStyleメソッドで対象となるHTML要素のCSSStyleDeclarationオブジェクトを取得してから使用します。
getPropertyValueメソッドのパラメータには取得したいCSSプロパティ名をCSSと同じ形式で指定することで適用された値を取得することができます。

以下の例ではまず、HTMLからarticle要素とp要素を取得してgetComputedStyleメソッドでCSSStyleDeclarationオブジェクトを取得します。
その後に、getPropertyValueメソッドを使って各要素に適用されたCSSの値を取得して出力します。

JS コード例

// HTML要素を取得
let article_element = document.getElementById("content1");
let p1_element = document.getElementById("p1");

// CSSStyleDeclarationオブジェクトを取得
let article_css = getComputedStyle(article_element);
let p1_css = getComputedStyle(p1_element);

// article要素のCSSを出力
console.log(article_css.getPropertyValue("padding")); // 20px
console.log(article_css.getPropertyValue("background-color")); // rgb(247, 247, 247)

// p要素のCSSを出力
console.log(p1_css.getPropertyValue("color")); // rgb(0, 0, 204)
console.log(p1_css.getPropertyValue("font-size")); // 24px

いずれの方法も適用されているCSSの値を取得できる機能としては違いはありません。
CSSプロパティ名の指定方法などパラメータの渡し方が異なるため、使いやすい方法を選んで使用してください。