2011年03月12日

JavaScriptによるCSSスタイルの取得(サイズ関係)

JavaScriptからCSSのスタイルを取得する方法は、

1. 要素のstyleプロパティによる取得。
2. getComputedStyle()メソッドによる取得。
3. (IE限定で)要素のcurrentStyleプロパティによる取得。

の3つがある。

1の場合、例えばIDが「foo」であるdiv要素の上パディングを取得するには、

var foo = document.getElementById("foo");

とした上で、

foo.style.paddingTop;

で取得できる。

同様に2の場合、

var foo = document.getElementById("foo");
var fooStyle = window.getComputedStyle(foo, null);
fooStyle.paddingTop;

で取得できる。

3については、書式的には「style」を「currentStyle」に書き換えるだけである。

上記3方法の違いを簡単にまとめると、下の表のようになる。

要素のstyleプロパティによる取得。
  • CSSで指定した値をそのまま文字列として取得する。例えば、"1em"と設定していれば"1em"が取得できる。
  • CSSで未設定だった場合はnullになる。
  • プロパティは読み書き可能なので、スタイルの設定に使用できる。
getComputedStyle()メソッドによる取得。
  • CSSで指定した値をpxに換算した計算値を文字列として取得する。
  • CSSで未設定だった場合は"0px"になる。
  • 読み取り専用の値なので、このメソッドを使ってスタイルの設定はできない。
要素のcurrentStyleプロパティによる取得。
  • CSSで指定した値をそのまま文字列として取得する。例えば、"1em"と設定していれば"1em"が取得できる。
  • CSSで未設定だった場合はundefinedになる。
  • 読み取り専用の値なので、このメソッドを使ってスタイルの設定はできない。

ここで気になるのはcurrentStyleプロパティの返す値。オライリーとかには、getComputedStyle()メソッドと同様に計算値を得られる、みたいな説明になっていたはずだけど、いろいろ試した範囲ではstyleプロパティ同様、設定値をまんま得られるだけな気がする。だとすると、styleプロパティとなんも変わらないし、参照専用プロパティなだけにstyleプロパティより不便だしで、なんのためにあるんだろうって気になる。
試したときのやり方をなんか間違えているだけで、じつはちゃんと計算値を得られるのかな・・・?調べなくっちゃ。

どれを使うにせよ、計算に用いるためにはparseInt()などで数値化しなくてはならないわけだが、CSS中で未設定のプロパティに関して、styleプロパティの場合はnullが、currentStyleではundefinedしか得られないという点に対応しないとならない。例えばpaddingTopを取得する場合、

parseInt(foo.style.paddingTop, 10) || 0;
あるいは
parseInt(foo.currentStyle.paddingTop, 10) || 0;

とかしなくてはならず、ちょっとめんどい(上の場合、foo.style.paddingTopがnullあるいは、foo.currentStyle.paddingTopがundefinedならparseInt()はNaNを返す。これはnull同様、偽となる。念のため)。

■クロスブラウザを考えたgetComputedStyle()

Safariの場合getComputedStyle()は、windowオブジェクトにではなく、document.defaultViewに定義されている。とはいえ、document.defaultViewオブジェクトとは、そのドキュメントのwindowオブジェクトそのものなので、クロスブラウザ対応で考えた場合、最初の例は、

var foo = document.getElementById("foo");
var fooStyle = document.defaultView.getComputedStyle(foo, null);
fooStyle.paddingTop;

とすればSafari、Firefox、Opera共通のコードにできる。

ついでに、InternetExplorerの面倒もみるためにcurrentStyleプロパティを使わないとならない場合は以下のようにすれば良い。

var foo = document.getElementById("foo");
var fooStyle = foo.currentStyle || document.defaultView.getComputedStyle(foo, null);
fooStyle.paddingTop;

Webブラウザは国連が管理して1つに統一すべきだよね。
posted by ベルクカッツェ at 16:01| JavaScript | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。