jQueryのwidthメソッド、heightメソッドをJavaScriptだけで実装する方法をまとめました。
width, heightの取得
jQuery
const width = $('#hoge').width();
const height = $('#hoge').height();JavaScript
// borderとscrollbarの高さをめない場合
const width = document.getElementById('hoge').clientWidth;
const height = document.getElementById('hoge').clientHeight;
// borderとscrollbarの高さも含める場合
const width = document.getElementById('hoge').offsetWidth;
const height = document.getElementById('hoge').offsetHeight;注意点
- .widthと.heightはインラインスタイル(style=”xxx:xxx”)で指定されたスタイルしか取得することができないので使わない
window.getComputedStyle(document.getElementById('hoge')).width;で取得することもできるが、インライン要素の場合”auto”が返却される可能性があるので使わない
width, heightの設定
jQuery
$("#hoge").width(100)
$("#hoge").height(100)JavaScript
document.getElementById("hoge").style.width = "100px"
document.getElementById("hoge").style.height = "100px"※jQueryのwidthメソッド、heightメソッドの場合は数値だけでよいが、JavaScriptの場合はpxなどの単位が必要になるので注意