プログラミング/JavaScript/prototype.js の変更点
更新- 追加された行はこの色です。
- 削除された行はこの色です。
- プログラミング/JavaScript/prototype.js へ行く。
- プログラミング/JavaScript/prototype.js の差分を削除
[[公開メモ]] #contents * element.measure("property"); が便利すぎる [#m8c8c92c] 要素のサイズをピクセル単位で測りたいときに重宝する。 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 に対する注意点 [#d406eec3] 古い IE では margin-box-width のことを width と呼んでいたそうで、標準規格との非互換性を生んでいる。 新しい IE でも DOCTYPE をちゃんと指定しないと「古い IE との互換性」を保つモードで表示されることがあるそうで・・・ * 最近は jQuery に駆逐されかかってるのかも? [#rb5402bf] prototype.js の他に、jQuery というライブラリもかなり有名。 Ruby on Rails が prototype.js を使っていたので何となくこちらを使い始めたのだけれど、 いろいろ記事を読んでいると今は jQuery の方がずっとシェアが高いみたいで、 なにより Rails も最近は jQuery に乗り換えたんだとか・・・ jQuery はそれ自体が「言語」のような文法になるみたいなので取っつきにくいのだけれど jQuery はそれ自体が「言語」のような文法になるみたいで取っつきにくいのだけれど しかたがないからそちらも勉強してみようかなあ。
Counter: 2699 (from 2010/06/03),
today: 1,
yesterday: 0