[JQuery]横幅の取り方

JQueryでの横幅の取り方をまとめました

こんなhtml、cssを用意して(headとかbodyとか省略してます)
[html]
<style>
.box {
margin: 10px;
padding: 10px;
border: 5px solid #f00;
height: 100px;
width: 100px;
float: left;
}
</style>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
[/html]

こんなボックスが表示されます
jquery_sample

chromeの開発者ツールで見ると、ボックスひとつはこんな大きさ
chrome_layoutbox

widthで100px取ってるけど、padding左右で10*2=20px、border左右で5*2=10pxのため
中身は100-20-10=70pxになってます
margin左右も入れると、10*2=20px追加で、100+20=120pxがボックスを置くことでできる横幅です。

jQueryで横幅をとってみます
[javascript]
console.log($(‘.box’).width());
// 70 -> ボックスの中身の横幅
console.log($(‘.box’).outerWidth());
// 100 -> border含めたボックスの横幅 
console.log($(‘.box’).outerWidth(true));
// 120 -> ボックスを置くことで必要は横幅(margin含む)
[/javascript]

たまに間違うので、これですっきりしました

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください