プログラミング/JavaScript/prototype.js

(2204d) 更新

公開メモ

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 との互換性」を保つモードで表示されることがあるそうで・・・

最近は jQuery に駆逐されかかってるのかも?

prototype.js の他に、jQuery というライブラリもかなり有名。

Ruby on Rails が prototype.js を使っていたので何となくこちらを使い始めたのだけれど、 いろいろ記事を読んでいると今は jQuery の方がずっとシェアが高いみたいで、 なにより Rails も最近は jQuery に乗り換えたんだとか・・・

jQuery はそれ自体が「言語」のような文法になるみたいで取っつきにくいのだけれど しかたがないからそちらも勉強してみようかなあ。


Counter: 1468 (from 2010/06/03), today: 2, yesterday: 1