JavaScript

レシピ

HTML・DOM

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

特定のHTML要素に適用されたCSSの値を取得する方法について解説します。

この記事のポイント

  • getComputedStyleメソッドはオブジェクトのプロパティ形式で適用したCSSを取得できる
  • getPropertyValueメソッドはパラメータにCSSプロパティ名を指定して適用しているCSSを取得する

目次

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の値を取得して出力します。

コード例

// HTML要素を取得
var article_element = document.getElementById("content1");
var 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オブジェクトのメソッドなので、以下のように呼び出すこともできます。

コード例

// HTML要素を取得
var article_element = document.getElementById("content1");
var 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の値を取得して出力します。

コード例

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

// CSSStyleDeclarationオブジェクトを取得
var article_css = getComputedStyle(article_element);
var 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プロパティ名の指定方法などパラメータの渡し方が異なるため、使いやすい方法を選んで使用してください。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。