2011年03月12日

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

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