Window: getDefaultComputedStyle() メソッド
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
getDefaultComputedStyle() メソッドは、要素のすべての CSS プロパティの既定の計算値を返します。この際、作成者によるスタイル設定は無視されます。つまり、ユーザーエージェントとユーザーによるスタイル設定のみが考慮されます。
構文
getDefaultComputedStyle(element)
getDefaultComputedStyle(element, pseudoElt)
引数
element-
計算済みスタイルを取得する対象の
Elementです。 pseudoElt省略可-
一致する擬似要素を指定する文字列。通常の要素の場合は
null（または未指定）でなければなりません。
返値
返される style は CSSStyleDeclaration オブジェクトです。このオブジェクトは Window.getComputedStyle() が返すオブジェクトと同じ型ですが、ユーザーエージェントとユーザースタイルのみを考慮します。
例
単純な例
const elem = document.getElementById("elemId");
const style = getDefaultComputedStyle(elem);
より長い例
<div id="elem-container">ダミー</div>
<div id="output"></div>
#elem-container {
position: absolute;
left: 100px;
top: 200px;
height: 100px;
}
const elem = document.getElementById("elem-container");
const theCSSprop = getDefaultComputedStyle(elem).position;
document.getElementById("output").textContent = theCSSprop; // "static" と出力
擬似要素で使用
getDefaultComputedStyle()メソッドは、擬似要素（::before や ::after など）からスタイル情報を取得することが可能です。
<h3>生成コンテンツ</h3>
h3::after {
content: " rocks!";
}
const h3 = document.querySelector("h3");
const result = getDefaultComputedStyle(h3, "::after").content;
console.log("the generated content is: ", result); // returns 'none'
メモ
特定の既知のケースにおいて、返される値は意図的に明示的に不正となります。
具体的には、いわゆる CSS 履歴漏洩のセキュリティ課題を避けるため、ブラウザーはリンクの :visited 擬似セレクターを適用する際に、使用済みリンクの値について明示的に「嘘」をつき、ユーザーがリンク先サイトを一度も訪問したことがないかのように常に値を返したり、適用可能なスタイルを制限していたりすることがあります。
これを実装する方法の例の詳細については、 https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/ および https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/）を参照してください。
仕様書
CSS ワーキンググループに提案されています。
ブラウザーの互換性
Loading…