prototype.js のバックアップ差分(No.2)

更新

バックアップ一覧
現在との差分を表示
ソースを表示
バックアップを表示
プログラミング/JavaScript/prototype.js へ行く。
- 1 (2012-08-31 (金) 14:33:57)
- 2 (2012-08-31 (金) 14:47:43)
- 3 (2012-10-05 (金) 01:19:25)

追加された行はこの色です。
削除された行はこの色です。

[[公開メモ]]

* element.measure("property"); が便利すぎる [#m8c8c92c]

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

DOM の要素は

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

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

で、これらを JavaScript から読みたいとき、
詳しい説明はたとえばこことか分かりやすかったです：~
http://webdesignrecipes.com/css-visual-formating-model/

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

この関数は値をちゃんと "px" 単位に直して返してくれる。
この関数はそのような値をちゃんと "px" 単位に直して返してくれる。

しかも、普通にはスタイルで参照できない "margin-box-height" なんかも取れる。
しかも、普通にはスタイルで参照できない "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
top/bottom/left/right などは、１階層上の「配置されたオブジェクト(positionにrelative/absoluteが指定されたオブジェクト)」のクライアント座標が返ることになる。

の関係があることは、細かいレイアウトをする時には必ず覚えておくべきだ。

# 古い IE では margin-box-width のことを width と呼んでいたらしくて、~
# 標準規格との非互換性を生んでいる。
細かいレイアウトをする時には

# 新しい IE でも DOCTYPE をちゃんと指定しないと「古い IE との互換性」~
# を保つモードで表示されることがあるみたい
- width <= padding-box-width <= border-box-width <= margin-box-width

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

** IE に対する注意点 [#d406eec3]

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

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

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