要素の算出されたスタイルを取得

要素の算出されたスタイル（CSSのプロパティと指定されている値）を取得するには、window.getComputedStyleメソッドを使用します。

※ IE8以下には対応していません。

構文

var style = window.getComputedStyle(element[, pseudoElt]);

引数名		型	説明
第一引数必須	element	Element	取得したい要素
第二引数	pseudoElt	string\|null	一致させたい疑似要素

戻り値

CSSStyleDeclarationオブジェクトを返します。

サンプルコード

JavaScript

var element = document.getElementById('sample'),
    style   = window.getComputedStyle(element);

// 特定のプロパティの値を取得
console.log(style.marginTop);

プロパティの値を取得する場合は要素の算出されたCSSプロパティの値を取得ページをご覧ください。

IE8以下に対応させる

IE8以下（6以上）に対応させるには、element.currentStyleプロパティを使用します。
ただし、このプロパティは指定値を取得するので、autoなどのキーワードで指定されていた場合（初期値を含む）、戻り値はそのキーワードで返します。

※ オブジェクトからプロパティを参照する場合は、キャメルケースで指定する必要があります。

構文

var style = element.currentStyle;

戻り値

オブジェクトを返します。

関数定義

window.getComputedStyleとelement.currentStyleを1つにまとめた関数を定義して使用する方法です。

JavaScript

var getStyleValue = function(element, styleName, pseudoElt) {
	var style;

	if (!element) return '';
	if (!pseudoElt) pseudoElt = '';

	var toCamelcase = function(str, upper) {
		if (!str) return str;

		var strs = str.split(/[-_ ]+/), i = 1, len = strs.length;

		if (len <= 1) return str;

		if (upper) {
			i = 0;
			str = '';
		} else {
			str = strs[0].toLowerCase();
		}

		for (; i < len; i++) {
			str += strs[i].toLowerCase().replace(/^[a-z]/, function(value) {
				return value.toUpperCase();
			});
		}

		return str;
	};

	if (document.defaultView) {
		style = document.defaultView.getComputedStyle(element, pseudoElt);
	} else {
		style = element.currentStyle;
		styleName = toCamelcase(styleName);
	}

	return (styleName) ? style[styleName] : style;
};

使い方

引数

引数名		型	説明
第一引数必須	element	Element	要素
第二引数	styleName	string	取得したいスタイルのプロパティ名
第三引数	pseudoElt	string	getComputedStyleメソッドの第二引数と同じ一致させたい疑似要素

戻り値

第二引数の指定があった場合は指定したプロパティの値、指定しなかった場合はgetComputedStyleメソッドの戻り値またはcurrentStyleプロパティの戻り値を返します。

サンプルコード

JavaScript

var element = document.getElementById('sample'),
	result  = getStyleValue(element, 'height');

alert(result);

JavaScript逆引きリファレンス一覧へ戻る