プログラミング/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 などは、1階層上の「配置されたオブジェクト(positionにrelative/absoluteが指定されたオブジェクト)」のクライアント座標が返ることになる。

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

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

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

IE に対する注意点

古い IE では margin-box-width のことを width と呼んでいたそうで、標準規格との非互換性を生んでいる。

新しい IE でも DOCTYPE をちゃんと指定しないと「古い IE との互換性」を保つモードで表示されることがあるみたいなのだけれど、


Counter: 2803 (from 2010/06/03), today: 1, yesterday: 0