[jQuery] 要素の横幅と高さを取得する

投稿日：2017年10月1日更新日：2018年4月28日

要素の横幅と高さを取得するには、outerWidth/outerHeight、innerWidth/innerHeightを使用します。

サンプルソース

例）hogeをクリックすると要素のサイズを表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テスト</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#d1').click(function(e){
    let ow = $(this).outerWidth();
    let oh = $(this).outerHeight();
    let iw = $(this).innerWidth();
    let ih = $(this).innerHeight();
    alert(ow + "x" + oh + "、" + iw + "x" + ih);
  });
});
</script>
<style>
#d1{
  background-color:#f0f0f0;
  border:5px solid #999999;
  width:150px;
  height:100px;
}
</style>
</head>
<body>
  <div id="d1">hoge</div>
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$('#d1').click(function(e){

let ow = $(this).outerWidth();

let oh = $(this).outerHeight();

let iw = $(this).innerWidth();

let ih = $(this).innerHeight();

alert(ow + "x" + oh + "、" + iw + "x" + ih);

});

</script>

<style>

#d1{

background-color:#f0f0f0;

border:5px solid #999999;

width:150px;

height:100px;

}

</style>

</head>

<body>

</body>

</html>

結果例

150x100のDIVで、枠線の太さが10pxです。

hoge

（結果）: 160x110、150x100

１つ目の値はouter値、２つ目の値はinner値です。

解説

outerWidth、outerHeightはborderサイズを含むサイズを返します。
innerWidth、innerHeightはborderサイズを含まないサイズを返します。
outerWidthとouterHeightは引数にtrueを渡すと、marginを含んだ値が返ります。
例）outerWidth(true);

執筆者：とら