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

element.measure("property"); が便利すぎる †

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

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 との互換性」

# を保つモードで表示されることがあるみたい