プログラミング/JavaScript/prototype.js のバックアップソース(No.1)

更新 
[[公開メモ]]

* element.measure("property"); が便利すぎる [#m8c8c92c]

要素のサイズをピクセル単位で測りたいときに重宝する。

DOM の要素は

- 内容物 = width x height
- その周りに padding
- その周りに border
- その周りに margin

があって、それぞれ細かくピクセル単位で指定できる。

で、これらを JavaScript から読みたいとき、
普通に element.style.width とかを参照すると、
空になっていたり "100%" とか返ってきてがっかりする。

この関数は値をちゃんと "px" 単位に直して返してくれる。

しかも、普通にはスタイルで参照できない "margin-box-height" なんかも取れる。

"property" として与えることができるのは、

- height
- width
- padding-box-height
- padding-box-width
- border-box-height
- border-box-width
- margin-box-height
- margin-box-width
- top/bottom/left/right = getHeight(), getWidth() = clientWidth, clientHeight
- padding-top/bottom/left/right
- border-top/bottom/left/right
- margin-top/bottom/left/right

だけあって、普通に使いたくなる物はすべてそろっている。

width <= padding-box-width <= border-box-width <= margin-box-width

の関係があることは、細かいレイアウトをする時には必ず覚えておくべきだ。

# 古い IE では margin-box-width のことを width と呼んでいたらしくて、~
# 標準規格との非互換性を生んでいる。

# 新しい IE でも DOCTYPE をちゃんと指定しないと「古い IE との互換性」~
# を保つモードで表示されることがあるみたい
Counter: 2735 (from 2010/06/03), today: 1, yesterday: 0