SYNCERのロゴ
アイキャッチ画像

Window.getComputedStyle() - 適用されたスタイルシートを取得する

getComputedStyle()は、Windowのメソッドです。要素に適用されているスタイルシートをCSSStyleDeclarationで返します。スタイルシートは初期値や継承が考慮された計算値です。

概要

名前
getComputedStyle
所属
Window
IDL
[NewObject] CSSStyleDeclaration getComputedStyle(Element elt, optional CSSOMString? pseudoElt);

typedef USVString CSSOMString;

partial dictionary MouseEventInit {
    long movementX = 0;
    long movementY = 0;
};

partial dictionary MouseEventInit {
  double screenX = 0.0;
  double screenY = 0.0;
  double clientX = 0.0;
  double clientY = 0.0;
};

dictionary MouseEventInit : EventModifierInit {
  long screenX = 0;
  long screenY = 0;
  long clientX = 0;
  long clientY = 0;

  short button = 0;
  unsigned short buttons = 0;
  EventTarget? relatedTarget = null;
};

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

dictionary UIEventInit : EventInit {
  Window? view = null;
  long detail = 0;
};

dictionary EventInit {
  boolean bubbles = false;
  boolean cancelable = false;
  boolean composed = false;
};
仕様書
https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle

説明

第1引数(elt)には、対象の要素を指定します。

取得対象が擬似要素の場合、第2引数(pseudoElt)に擬似要素を表す文字列(例: ::before)を指定します。

対象の要素に適用されているスタイルシートの情報を、CSSStyleDeclarationで返します。

デモ

Window.getComputedStyle()のデモです。p要素に適用されている"font-family"の値を取得します。スタイルシートで直接指定していなくても、初期値や継承が考慮された計算値が返るのを確認しましょう。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<head>
<style>
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<p id="hoge">SYNCER</p>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
var cssStyleDeclaration = getComputedStyle( element ) ;

console.log( cssStyleDeclaration ) ;
appendText( cssStyleDeclaration + "\n" ) ;
appendText( "getPropertyValue(): " + cssStyleDeclaration.getPropertyValue( "font-family" ) ) ;

function appendText( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ; 
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月14日 (土)
コンテンツを公開しました。