プログラミング/JavaScript/prototype.js の履歴(No.2)

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

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

DOM の要素は

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

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

詳しい説明はたとえばこことか分かりやすかったです：
http://webdesignrecipes.com/css-visual-formating-model/

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

この関数はそのような値をちゃんと "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

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

top/bottom/left/right などは、１階層上の「配置されたオブジェクト(positionにrelative/absoluteが指定されたオブジェクト)」のクライアント座標が返ることになる。

細かいレイアウトをする時には

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

の関係があることを必ず覚えておくべきだ。