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 | このブログの読者になる | 更新情報をチェックする

JavaScriptによる要素サイズの取得

要素サイズ取得系は、

offsetWidthとoffsetHeight
clientWidthとclientHeight
scrollWidthとscrollHeight

の3つがある。

書式の例:element.offsetWidth
戻り値の型:数値

それぞれ似ているので違いをまとめると以下の表のようになる。

offsetWidth
offsetHeight
width(またはheight) + padding + borderを返す。
clientWidth
clientHeight
width(またはheight) + paddingを返す。考え方としては、要素の内容を表示する領域の幅と高さ。
scrollWidth
scrollHeight
width(またはheight) + paddingを返す。通常はclientWidthおよびclientHeightと同じ。 ただし、要素の内容が表示領域の幅や高さを超えた場合、内容が占めるであろう幅と高さを返す。

client系とscroll系の違いは、例えば、表示領域の高さが5行分のときに、内容が10行分あった場合、clientHeightは5行分(+パディング)を返すが、scrollHeightは10行分を返す。

しかしsafariでは、scrollHeightはパディング領域の高さを含んだ数値を返していないように見える・・・。chromeも返す値がなんか違う。FireFoxは正しい希ガス。調べなくては。

※追記
FIreFoxでは、要素の内容が表示領域を超えてもscrollHeightがclientHeightと同じ値しか返さない。これも調べなくては・・・。

posted by ベルクカッツェ at 01:06| JavaScript | このブログの読者になる | 更新情報をチェックする
×

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