プログラミング/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 との互換性」

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


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