getComputedStyle 関数

getComputedStyle 関数は、 要素の CSS プロパティの値を、 CSS ファイルからでも取得することができます。

構文

javascriptlet オブジェクト = getComputedStyle(要素);

詳細

どのように動作するか（注意：私たちが期待するようには動作しません）：この関数はパラメータとして要素を受け取り、渡された要素のすべての CSS プロパティを含むオブジェクトを返します。 このオブジェクトを変数 style に入れましょう。名前は任意で、単なる変数です - 思いついたように呼び出せます：

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style には CSS プロパティが入っています

例えば、幅を出力してみましょう。これは style.width のようにします：

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.width);

例えば、左の padding を出力するには、 style.paddingLeft のようにします：

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

次の例では、対象の要素に関して私たちが興味を持つすべての CSS プロパティを出力します：

html<div id="elem">text</div>

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // '30px' と出力されます
console.log('borderTopWidth: ' + style.borderTopWidth); // '20px' と出力されます
console.log('borderTopStyle: ' + style.borderTopStyle); // 'solid' と出力されます

getComputedStyle の不正確さ

時々、関数 getComputedStyle は幅と高さに関して完全には正確に動作しません。 これは、padding と境界線がブロックを拡張するためです。次の例では、ブロックに幅 200px と、境界線と border が設定されています。ブロックの実際の幅は 300px ですが、getComputedStyle は依然として 200px を出力します：

html<div id="elem">text</div>

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // '200px' と出力されます
console.log('height: ' + style.height); // '200px' と出力されます

つまり、getComputedStyle はブロックの拡張を無視し、あたかもその拡張がなかったかのようにその寸法を表示するのです。 しかしこれだけではありません：スクロールバーの有無も重要です - 一部のブラウザは、getComputedStyle で計算された幅からスクロールバーの幅を差し引きますが、一部は差し引きません。つまり、ここはまったくクロスブラウザ対応ではなく、幅と高さを決定するために getComputedStyle を使用するのは避け、すぐ後で学ぶメトリクスを使用する方が良いでしょう。

計算値

もう一つのニュアンスがあります：もし幅が % で指定されている場合、getComputedStyle を実行した後、私たちはそれを px で見ることになります。つまり、実質的には指定された幅ではなく、計算された幅を取得することになります。次の例を見てください：

html<div id="elem">text</div>

css#elem {
  width: 30%; /* 幅は % で指定 */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // px 単位の幅を出力します

関連項目