JavaScriptで特定の要素に指定されているCSSプロパティの値を取得する方法

特定の要素に対して、CSSで指定されているプロパティ（幅や高さや背景色など）の値を取得する方法です。

背景色のカラーコードを取得するサンプル

以下に、背景色のカラーコードを取得するサンプルをcodepenで作りました。

HTML

<div id="box"></div>
<p id="disp"></p>

CSS

#box {
 background-color: #eef0e1;
 width: 250px;
 height: 200px;
}

JavaScript

let box = document.getElementById('box'); // idが「box」の要素を取得
let GetBgColor = window.getComputedStyle(box, null).getPropertyValue('background-color'); // 取得した要素に指定されているCSSのプロパティ「background-color」の値を取得する

let disp = document.getElementById('disp'); // idが「disp」の要素を取得
disp.innerHTML = 'background-color ' + GetBgColor; // 要素内に背景色のカラーコードを表示

「getComputedStyle」と「getPropertyValue」を使って、idが「box」の要素に適用されている背景色のカラーコード「rgb(238, 240, 225)」を取得しています。

カラーコードはrgbで取得されますが、16進数に変換すると「#eef0e1」となります。ちゃんと取得できていることが確認できますね。

getComputedStyleについて

getComputedStyleについては、MDNのサイトに以下のように書かれているので参考にしました。

The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

（Window.getComputedStyle() – Web APIs | MDN より）

えっと・・・getComputedStyleは「特定の要素に対して、スタイルシートを適用後に諸々の算出をした後のすべてのCSSプロパティの値を取得する」という意味で理解をしているのですが、英文を読むことがあまり得意ではないので、意味が違っていたらご教示いただけますと幸いです。

getPropertyValueについて

getPropertyValueについては、「getComputedStyleで取得した値の中から、特定のプロパティの値を取得」します。

いくつか例を挙げると・・・以下は背景色を指定するプロパティ「background-color」の値を取得します。

background-colorの値を取得

getPropertyValue('background-color')

同じような要領で、プロパティを指定すればOKですね。幅「width」や高さ「height」を取得したい場合は、以下のように書きます。

widthの値を取得

getPropertyValue('width')

heightの値を取得

getPropertyValue('height')

getPropertyValueに「CSSのプロパティを指定してあげればいいんだな」ということが何となくわかりますね。

まとめ

CSSで指定したプロパティの値を取得するには、特定の要素に対して「getComputedStyle」と「getPropertyValue」をセットで使えばいいんだな、と覚えておくのもいい方法かなと思います。