【脱jQuery】JavaScriptだけで要素のwidth, heightを取得・設定する方法

スポンサーリンク

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などの単位が必要になるので注意

スポンサーリンク

コメント