getComputedStyle で計算済みスタイルを取得する
getComputedStyle は、要素に実際に適用されているスタイルを取得する関数です。CSS ファイルで設定したスタイルも取得できます。
element.style との違い
element.style はインラインスタイルしか取得できません。CSS ファイルや <style> タグで設定したスタイルは取得できません。
<style>
#box { color: red; font-size: 16px; }
</style>
<div id="box">テスト</div>const box = document.getElementById('box');
// style では取得できない
console.log(box.style.color); // ""（空）
console.log(box.style.fontSize); // ""（空）
// getComputedStyle なら取得できる
const computed = getComputedStyle(box);
console.log(computed.color); // "rgb(255, 0, 0)"
console.log(computed.fontSize); // "16px"基本的な使い方
const element = document.getElementById('target');
const styles = getComputedStyle(element);
// 各プロパティを取得
console.log(styles.width);
console.log(styles.height);
console.log(styles.backgroundColor);
console.log(styles.padding);計算済みの値が返る
名前の通り「計算済み」の値が返ります。
// CSS で width: 50% と設定していても
console.log(styles.width); // "250px" のように計算後の値
// 色は rgb() 形式で返る
console.log(styles.color); // "rgb(255, 0, 0)"実際に動かしてみよう
HTML
CSS
JavaScript
<div id="target">スタイルを確認</div>
<button id="checkBtn">スタイルを取得</button>
<pre id="result"></pre>#target {
width: 200px;
padding: 20px;
background-color: #4caf50;
color: white;
font-size: 18px;
border-radius: 8px;
}document.getElementById('checkBtn').addEventListener('click', () => {
const target = document.getElementById('target');
const styles = getComputedStyle(target);
const info = [
'width: ' + styles.width,
'padding: ' + styles.padding,
'backgroundColor: ' + styles.backgroundColor,
'color: ' + styles.color,
'fontSize: ' + styles.fontSize
];
document.getElementById('result').textContent = info.join('\n');
});疑似要素のスタイルを取得
第2引数で疑似要素を指定できます。
const styles = getComputedStyle(element, '::before');
console.log(styles.content);getComputedStyle の注意点
読み取り専用
getComputedStyle で取得した値は変更できない。変更するには style プロパティを使う
パフォーマンス
呼び出すたびに計算が発生するので、ループ内で何度も呼ばないほうがよい
使いどころ
element.style
スタイルを設定するとき。インラインスタイルの取得
getComputedStyle
実際に適用されているスタイルを知りたいとき
// 現在の幅を取得して、それをもとに計算
const styles = getComputedStyle(element);
const currentWidth = parseInt(styles.width);
element.style.width = (currentWidth + 100) + 'px';getComputedStyle は、現在のスタイルを知る必要があるときに使う強力なツールです。
9views
