No.229
【jQuery】要素の高さと幅を正確に取得する
正確なデザインは正確な要素の大きさ調整から（自戒
jQueryで要素の大きさを取得するときに何を使うのか。一般的によく使われているのはwidth()やheight()メソッドだろう。
もちろん簡単な制御とかならこれでも充分なのだけど、厳密にレイヤーの重ね合わせをしたり、ウィンドウ制御を行う場合にはいろいろな要素を気にしないと正確な操作を行う事ができない。
いろいろな要素というのは、各要素のmarginとかpaddingとかborderとかだ。
これらをひとつひとつ加算しなきゃいけないと考えるときが遠くなるけど、良く出来たものでそれぞれをうまく取得するためのメソッドが用意されている。ご安心を。
横
| メソッド | 取得できるCSS |
|---|---|
| width() | width |
| innerWidth() | width + padding |
| outerWidth() | width + padding + border |
| outerWidth(true) | width + padding + border + margin |
※outerWidth()は引数にtrueを与えることで挙動が変わる。
縦
| メソッド | 取得できるCSS |
|---|---|
| height() | height |
| innerHeight() | height + padding |
| outerHeight() | height + padding + border |
| outerHeight(true) | height + padding + border + margin |
※outerHeight()は引数にtrueを与えることで挙動が変わる。