要素の縦横サイズを取得

jqueryのメソッドwidth(),height()とouterWidth(),outerHeight()の実験

先に実験結果

width(),height()はCSSのwidth,heightと同じ。

outerWidth()はwidthにpaddingとborderを加算した幅。 marginは無視。outerHeight()も同様である。

実験1:プレーン

<div id="test1" >
	いろはにほへとちりぬるを<br>
	わかよたれそつねならむ
</div>
いろはにほへとちりぬるを
わかよたれそつねならむ


実験2:inline-block

<div id="test2" style="display:inline-block" >
	いろはにほへとちりぬるを<br>
	わかよたれそつねならむ
</div>
いろはにほへとちりぬるを
わかよたれそつねならむ



実験3:margin

<div id="test3" style="margin:5px" >
	いろはにほへとちりぬるを<br>
	わかよたれそつねならむ
</div>
いろはにほへとちりぬるを
わかよたれそつねならむ


実験4:margin + inline-block

<div id="test4" style="margin:5px;display:inline-block">
	いろはにほへとちりぬるを<br>
	わかよたれそつねならむ
</div>
いろはにほへとちりぬるを
わかよたれそつねならむ


実験5:padding + inline-block

<div id="test5" style="padding:5px;display:inline-block">
	いろはにほへとちりぬるを<br>
	わかよたれそつねならむ
</div>
いろはにほへとちりぬるを
わかよたれそつねならむ


実験6:width + height

<div id="test6" style="width:200px;height:50px;">
	いろはにほへとちりぬるを<br>
	わかよたれそつねならむ
</div>
いろはにほへとちりぬるを
わかよたれそつねならむ


実験7:width + height + padding

<div id="test7" style="width:200px;height:50px;padding:5px">
	いろはにほへとちりぬるを<br>
	わかよたれそつねならむ
</div>
いろはにほへとちりぬるを
わかよたれそつねならむ


実験8:border

<div id="test8" style="width:200px;height:50px;border:5px #88ff88 solid">
	いろはにほへとちりぬるを<br>
	わかよたれそつねならむ
</div>
いろはにほへとちりぬるを
わかよたれそつねならむ


(c)wacgance 2015-12-17