【js】javascriptとjQueryの幅の取得方法

javascriptとjQueryでの幅の取得方法の備忘録

要素の幅を取得するjavascriptとjQuery

前回まとめきれなかったので実質前回の続き

使用するソースコード

<style>
#content{
	background:#ddd;
	border:solid 2px;
	padding: 20px;
	width: 200px;
}
</style>

<div id="content">テキスト</div>

javascriptとjQueryのソースコード

box-sizing: border-box;を使うのと使わないので取得できる値がかなり変わったのでメモ

まずはjavascript

【javascript(box-sizing: border-box;なし)】

document.defaultView.getComputedStyle(document.getElementById('content'), null).width;
// 200px(paddingとborderを除く幅)
parseInt(window.getComputedStyle(document.getElementById('content')).width);
// 200(paddingとborderを除く幅)
document.getElementById('content').clientWidth
// 240(paddingだけを含む幅)
document.getElementById('content').offsetWidth
// 244(paddingとborderを含む幅)

【javascript(box-sizing: border-box;あり)】

document.defaultView.getComputedStyle(document.getElementById('content'), null).width;
// 200px(paddingとborderを除く幅)
parseInt(window.getComputedStyle(document.getElementById('content')).width);
// 200(paddingとborderを除く幅)
document.getElementById('content').clientWidth
// 196(paddingだけを含む幅)
document.getElementById('content').offsetWidth
// 200(paddingとborderを含む幅)

parseInt()はpxを除いた整数値を返してくれる

次にjQuery

【jQuery(box-sizing: border-box;なし)】

$('#content').width();
// 200(paddingとborderを除く幅)
$('#content').innerWidth();
// 240(paddingだけを含む幅)
$('#content').outerWidth();
// 244(paddingとborderを含む幅)

【jQuery(box-sizing: border-box;あり)】

$('#content').width();
// 156(paddingとborderを除く幅)
$('#content').innerWidth();
// 196(paddingだけを含む幅)
$('#content').outerWidth();
// 200(paddingとborderを含む幅)

参考

脱jQuery .innerHeight() .innerWidth() .outerHeight() .outerWidth()

HTML 要素のサイズを取得する