【JavaScript】 「CSS」の値を取得する方法

こんにちは、さち です。

先日、JavaScript を書いているとき、「要素」に設定されている「CSS」の値を取得したいことがありました。

直感で書いてみたら失敗したので、正しい方法を備忘録としてこの記事に残しておきます。

失敗した方法

HTML・CSS

<div id="target">テキスト</div>

#target { width: 150px; }

JavaScript

let elm = document.getElementById('target');

let width = elm.style.width;
console.log(width);// <empty string>

CSS の width を書き換えるときは elm.style.width = '150px'; と書くので、逆に読み込んでみようと試したのがこれです。

結果は、「空の文字列」が返ってくるだけ。ダメでした。

上手くいった方法

JavaScript

let elm = document.getElementById('target');

let css = window.getComputedStyle(elm);
let width = css.width;
console.log(width);// 150px

要素の CSS を取得するには window.getComputedStyle() を使います。CSS を書き換えるときとは記述形式が全然違いますね。

注意点

値の「単位」は選べない

この方法で取得できる「値」は、CSS に記述した通りのものではありません。

例えば、下記のように width: 50%; と指定しても、取得できる width は px に換算された値です。

<div id="parent">
  <div id="child">テキスト<div>
</div>

#parent { width: 200px; }
#child  { width: 50%; }

let child = document.getElementById('child');

let css = window.getComputedStyle(child);
let width = css.width;
console.log(width);// 100px

他にも、「色」は rgb(255, 255, 255) の形で返ってきます。

「リアルタイム」で更新される

一度、window.getComputedStyle() で取得した要素の CSS は、リアルタイムで更新されます。

<div id="target">テキスト</div>

#target { width: 111px; }

let elm = document.getElementById('target');

let css = window.getComputedStyle(elm);
console.log(css.width);// 111px

elm.style.width = '222px';
console.log(css.width);// 222px