Window: 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()
• 解決値