window.getComputedStyle

This translation is incomplete. この記事の翻訳にご協力ください

window.getComputedStyle() メソッドは、すべてのCSSプロパティの値を含むオブジェクトを返します。値はアクティブなスタイルシートを適用して計算した値になります。個別のCSSのプロパティの値には、このオブジェクトからAPIを通してアクセスできます。または、CSSプロパティの名称のインデックスを用いてください。

シンタックス

var style = window.getComputedStyle(element [,pseudoElt]);
element
この Element の計算したスタイルを取得します。
pseudoElt
マッチさせたい疑似要素を指定する文字列です。通常要素には空文字列を指定してください。

返り値 style は、CSSSTyleDeclaration オブジェクトです。この値は要素のスタイルが変わると自動で更新します。

Throws

TypeError
If the passed object is not an Element or the pseudoElt is not a valid pseudo-element selector or is ::part() or ::slotted().

Note: Valid pseudo-element selector refers to syntactic validity, eg. "::unsupported" is considered valid, even though the pseudo-element itself is not supported.

この例では、<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

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.textContent = 'My computed font-size is ' +
    compStyles.getPropertyValue('font-size') +
    ',\nand my computed line-height is ' +
    compStyles.getPropertyValue('line-height') +
    '.';

Result

詳細

The returned object is the same CSSStyleDeclaration type as the object returned from the element's style property. However, the two objects have different purposes:

  • The object from getComputedStyle is read-only, and should be used to inspect the element's style — including those set by a <style> element or an external stylesheet.
  • The element.style object should be used to set styles on that element, or inspect styles directly added to it from JavaScript manipulation or the global style attribute.

The first argument must be an Element. non-elements, like a Text node, will throw an error.

defaultView

In many code samples, getComputedStyle is used from the document.defaultView object. In nearly all cases, this is needless, as getComputedStyle exists on the window object as well. It's likely the defaultView pattern was a combination of folks not wanting to write a testing spec for window and making an API that was also usable in Java.

Use with pseudo-elements

getComputedStyle can pull style info from pseudo-elements (such as ::after::before::marker::line-marker — see the pseudo-element spec).

<style>
  h3::after {
    content: ' rocks!';
  }
</style>

<h3>Generated content</h3> 

<script>
  var h3 = document.querySelector('h3'); 
  var result = getComputedStyle(h3, ':after').content;

  console.log('the generated content is: ', result); // returns ' rocks!'
</script>

ノート

  • The returned CSSStyleDeclaration object contains active values for CSS property longhand names. For example, border-bottom-width instead of the border-width and border shorthand property names. It is safest to query values with only longhand names like font-size. Shorthand names like font will not work with most browsers.
  • CSS property values may be accessed using the getPropertyValue(propName) API or by indexing directly into the object such as obj['z-index'] or obj.zIndex.
  • The values returned by getComputedStyle are resolved values. These are usually the same as CSS 2.1’s computed values, but for some older properties like widthheight, or padding, they are instead the same as used values. Originally, CSS 2.0 defined the computed values as the "ready to be used" final values of properties after cascading and inheritance, but CSS 2.1 redefined them as pre-layout, and used values as post-layout. For CSS 2.0 properties, getComputedStyle returns the old meaning of computed values, now called used values. An example difference between pre- and post-layout values includes the resolution of percentages for width or height, as those will be replaced by their pixel equivalent only for used values.
  • Returned values are sometimes deliberately inaccurate. To avoid the “CSS History Leak” security issue, browsers may lie about the computed styles for a visited link, returning values as if the user never visited the linked URL. See Plugging the CSS History Leak and Privacy-related changes coming to CSS :visited for examples of how this is implemented.
  • During CSS transitionsgetComputedStyle returns the original property value in Firefox, but the final property value in WebKit.
  • In Firefox, properties with the value auto return the used value, not the value auto. So if you apply top:auto and bottom:0 on an element with height:30px and a containing block of height:100px, Firefox's computed style for top returns 70px, as 100 − 30 = 70.

仕様

仕様 状態 備考
CSS Object Model (CSSOM)
getComputedStyle() の定義
草案
Document Object Model (DOM) Level 2 Style Specification
getComputedStyle() の定義
廃止された Initial definition

ブラウザ互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
getComputedStyleChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 あり
補足
完全対応 あり
補足
補足 Before version 62 this function returned null when called on a Window with no presentation (e.g. an iframe with display: none; set). Since 62 it returns a CSSStyleDeclaration object with length 0, containing empty strings (bug 1467722; also see bug 1471231 for further work).
IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Before version 62 this function returned null when called on a Window with no presentation (e.g. an iframe with display: none; set). Since 62 it returns a CSSStyleDeclaration object with length 0, containing empty strings (bug 1467722; also see bug 1471231 for further work).
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Pseudo-element supportChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE 完全対応 9Opera 完全対応 15Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

参照