English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript オブジェクト

JavaScript リファレンスマニュアル

JS DOMリファレンスマニュアル

Window getComputedStyle() メソッド

JavaScript Window オブジェクト

getComputedStyle()メソッドは、CSSStyleDeclarationオブジェクト、そのオブジェクトには要素のすべてのCSS属性の値が含まれています。

計算されたスタイルは、複数のソースから「スタイル」が適用された後に、実際に要素に表示されるスタイルです。

スタイルソースには、内部スタイルシート、外部スタイルシート、継承されたスタイル、およびブラウザのデフォルトスタイルが含まれます。

}}CSSStyleDeclarationオブジェクトが提供するメソッドや、CSS属性名をインデックスとして使用して各CSS属性値にアクセスできます。

構文：

window.getComputedStyle(element,　pseudoElement)
var　heading　＝　document.getElementsByTagName("h1")[0];
var　x　＝　window.getComputedStyle(heading,　null).getPropertyValue("color");
テストしてみる‹/›

ブラウザの互換性

テーブルの数字は、getComputedStyle()メソッドを完全にサポートする最初のブラウザバージョンを指定します：

メソッド
getComputedStyle()11411.559

引数の値

引数説明
element計算スタイルを取得するための要素
pseudoElement（オプション）一致させるべきパseudoElementを指定する文字列。実際の要素に対しては省略（またはnull）されます。

技術的詳細

返り値：一个CSSStyleDeclarationオブジェクト、要素のCSS宣言ブロックを含みます。要素のスタイルが変更された場合、このオブジェクトは自動的に更新されます。

更多实例

在此示例中，我们为<p>元素设置样式，然后使用getComputedStyle()检索这些样式，并将其打印到<p>的文本内容中：

let　para　＝　document.querySelector('p');
let　compStyles　＝　window.getComputedStyle(para);
para.innerHTML　＝　'font-size:　'　+　compStyles.getPropertyValue('font-size');
para.innerHTML　+=　'<br>line-height:　'　+　compStyles.getPropertyValue('line-height');
para.innerHTML　+=　'<br>padding:　'　+　compStyles.getPropertyValue('padding');
テストしてみる‹/›

从元素获取所有计算出的样式：

let　para　＝　document.querySelector('p');
let　compStyles　＝　window.getComputedStyle(para);
for　(let　i　＝　0;　i　＜　compStyles.length;　i++)　{　
prop　＝　compStyles.item(i);
txt　+=　prop　+　「＝＝」　+　compStyles.getPropertyValue(prop)　+　"<br>";
}
テストしてみる‹/›

getComputedStyle()は、仮要素からスタイル情報を抽出できます（例：:: after、:: before、：firstfirstなど）：

var　div　=　document.getElementsByTagName("div")[0];
var　x　=　window.getComputedStyle(div,　"first-letter").getPropertyValue("font-size");
テストしてみる‹/›

関連参考

CSS 教程：CSS 教程

CSS 教程：CSS 仮要素

CSS 参考：CSS 属性

JavaScript 参考：CSSStyleDeclaration オブジェクト

CSSStyleDeclaration：getPropertyValue() メソッド

HTML 参考：HTML スタイル属性

HTML 参考：HTML <style> タグ

JavaScript Window オブジェクト

JS Storage オブジェクトJavaScript Window オブジェクト