要素の算出されたスタイルを取得
要素の算出されたスタイル(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);