2017-08-08

window.getComputedStyle を今更知った

window.getComputedStyle() なる API があるのをいまさら知った。

普段 JS で DOM 要素のスタイルを操作する時は element.style を使うが、window.getComputedStyle() は対象の要素の表示仕様を決めている、計算済みの全てのスタイル定義を取得できる。

「計算済みの」というのは、例えば 1em など相対的な単位で指定したものは 16px などのように計算された値が取得できる、ということ。「全てのスタイル」とは、親要素からの継承なども含めた全て、ということ。ついでに ::before や ::after 擬似要素の値も取得できる。

var elem = document.getElementById('example');

var styles = window.getComputedStyle(elem);

// 以下のいずれかの方法で値を取得できる
console.log(styles.fontSize);
console.log(styles.getPropertyValue('font-size'));

// ::before 擬似要素を取得する
var beforeStyles = window.getComputedStyle(example, '::before');
console.log(beforeStyles.content);

もうイマドキ生の DOM 操作なんてそうそうしないだろうけど、知らないままでいていいもんじゃない。知っておかなきゃ。