More than 5 years have passed since last update.

DOM 要素の実際に使用されているスタイルを取得

Posted at 2012-12-02

element.style から取得できるのは JavaScript で動的に設定したスタイルだけですが、window.getComputedStyle() を使うと親要素からの継承なども含めて DOM 要素の実際に使用されているスタイルを確認することができます。

var styles = getComputedStyle(document.body);
console.log(styles.marginTop);
// 0px

:before, :after など疑似要素のスタイルを知りたい場合は第二引数を使います。

var styles = getComputedStyle(document.body, ':before');

これまで jQuery ばかり使っていたので、DOM の API は知らないことばかりですね・・・。