Window.getComputedStyle() メソッドは、アクティブなスタイルシートを適用し、それらの値に含まれる可能性のある基本的な計算を解決した後の、要素のすべての CSS プロパティの値を含むオブジェクトを返します。

個々の CSS プロパティの値は、返されるCSSStyleDeclaration オブジェクトによって提供される API を介してアクセスするか、 CSS プロパティ名でインデックスを引くことでアクセスすることができます。getComputedStyle から返される値は解決値です。

構文

getComputedStyle(element)getComputedStyle(element, pseudoElt)

引数

element

このElement の計算したスタイルを取得します。

pseudoElt省略可

一致させる擬似要素を指定する文字列。実在する要素の場合は省略（またはnull）。

返値

生きたCSSStyleDeclaration オブジェクトで、要素のスタイルが変わると自動で更新されます。

注意事項:

• 返されるCSSStyleDeclaration オブジェクトには、CSS プロパティの個別指定名および省略名のアクティブな値が含まれます。例えば、返されるオブジェクトには、border-width およびborder一括指定プロパティ名に加えてborder-bottom-width の値の項目が含まれます。
• 返値は、意図的に不正確にされる場合もあります。セキュリティ上の課題である「CSS 履歴の漏洩」を避けるため、ブラウザーは、訪問したリンクの計算済みスタイルについて、ユーザーがリンク先の URL を訪問したことがないかのように値を返して偽装する場合があります。この実装の例については、Plugging the CSS history leak およびPrivacy-related changes coming to CSS:visited を参照してください。
• CSS トランジションの間、getComputedStyle は Firefox では元のプロパティの値を返しますが、WebKit では最終的なプロパティの値を返します。
• Firefox では、値auto のプロパティは、値auto ではなく、使用値を返します。したがって、height:30px の要素にtop:auto およびbottom:0 を適用し、その要素をheight:100px の包含ブロックで囲んだ場合、 Firefox のtop の計算値は 100 − 30 = 70 であるため、70px が返されます。
• 互換性の理由から、シリアル化された色値は、アルファチャンネルの値が正確に1 の場合はrgb() 色として、それ以外の場合はrgba() 色として表現されます。どちらの場合も、区切り文字としてカンマを使用した古い構文が使用されます（例えばrgb(255, 0, 0)）。

返されるオブジェクトはCSSStyleDeclaration 型であり、要素のstyle プロパティから返されるオブジェクトと同じです。ただし、2 つのオブジェクトは目的が異なります。

• getComputedStyle から取得されるオブジェクトは読み取り専用であり、<style> 要素または外部スタイルシートによって設定されたものも含め、要素のスタイルを検査するために使用します。
• element.style オブジェクトは、その要素のスタイルを設定したり、 JavaScript による操作やグローバルのstyle 属性から直接追加されたスタイルを検査したりするために使用します。

例外

TypeError

渡されたオブジェクトがElement ではないか、pseudoElt が有効な擬似要素セレクターではないか、::part() または::slotted() である場合。

メモ:有効な擬似要素とは、構文的に適切であることを指します。例えば::unsupported は擬似要素としての対応はありませんが、有効と判断されます。さらに、最新の W3 標準では::before と::after のみを明示的に対応していますが、 CSS の WG 草案はこの値を制限していません。ブラウザーの互換性は様々かもしれません。

例

計算値を受け取る

この例では、<p> の要素のスタイルを設定してから、getComputedStyle() を使用してそれらのスタイルを取得し、それらを<p> のテキストコンテンツに出力します。

HTML

<p>Hello</p>

CSS

p {  width: 400px;  margin: 0 auto;  padding: 20px;  font: 2rem/2 sans-serif;  text-align: center;  background: purple;  color: white;}

JavaScript

const para = document.querySelector("p");const compStyles = window.getComputedStyle(para);para.textContent =  `この font-size の計算値は ${compStyles.getPropertyValue("font-size")} です。\n` +  `この line-height の計算値は ${compStyles.getPropertyValue(    "line-height",  )} です。`;

結果

擬似要素の使用

getComputedStyle は擬似要素 (例えば::after,::before,::marker,::line-marker —the pseudo-element spec を参照してください) からスタイル情報を取得することができます。

<style>  h3::after {    content: " rocks!";  }</style><h3>生成コンテンツ</h3><script>  const h3 = document.querySelector("h3");  const result = getComputedStyle(h3, ":after").content;  console.log("生成コンテンツ: ", result); // ' rocks!' を返す</script>

仕様書

ブラウザーの互換性

関連情報

• window.getDefaultComputedStyle()
• getPropertyValue()
• Element.computedStyleMap()
• 解決値