【javascript】paddingを含まない幅の取得方法

javascriptでpaddingを含まない幅を取得しようとした時の備忘録

javascriptでpaddingを抜いた幅の取得方法

先に言っておくと最終的にはpaddingを含まない幅を取得するのにjQueryの.width()で対応しています

HTML・CSS

検証にこのソースコードを使います

<style>
#content{
	padding: 20px;
	width: 200px;
}
</style>

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

javascriptでpaddingを抜いた160pxを取得する方法

【javascript】
document.defaultView.getComputedStyle(document.getElementById('content'), null).width;
// 200px
parseInt(window.getComputedStyle(document.getElementById('content')).width);
// 200

【jQuery】
$('#content').width();
//200

とりあえずpaddingを抜いた幅は取得できたけど、160pxを取得したい…
あ、paddingを幅に含ませるbox-sizing: border-box;を忘れてた！って指定すると

【javascript】
document.defaultView.getComputedStyle(document.getElementById('content'), null).width;
// 200px
parseInt(window.getComputedStyle(document.getElementById('content')).width);
// 200

【jQuery】
$('#content').width();
//160

あれ？jQuery以外に反映されない？
調べても求めている内容の解答が見つからなかった

とりあえず、jQuery使えば解決できたのでここまでにする

参考

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

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

おまけ

classから幅を取得するとき

document.getElementsByClassName("text")[0].clientWidth;

配列で返されちゃうから指定しないと駄目みたいね

参考

document.getElementsByClassName で要素の幅を取得