(41) JavaScriptで要素の幅と高さを取得

(1) やりたいこと

ブロック要素などの幅と高さを JavaScriptで取得したい。

(2) 実験

幅の取得を以下の三通りで試してみる。
{要素}.innerWidth()
{要素}.outerWidth()
{要素}.width()

高さの取得を以下の三通りで試してみる。
{要素}.innerHeight()
{要素}.outerHeight()
{要素}.height()

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

<style>
*{
  margin: 0;
  padding: 0;
}
.box1{
  border: 20px #000 solid;
  padding: 10px;
  width:  300px;
  height: 400px;
}
.box1-1{
  background-color: #888;
  width: 100%;
  height: 100%;
}
</style>

</head>
<body>

<div class="box1">
  <div class="box1-1">
  </div>
</div>

<div id="output"></div>

<script>
$(document).ready(function(){
  var cont = '';
  cont += 'w_in : '  + $('.box1').innerWidth() + '<br />';
  cont += 'w_out : ' + $('.box1').outerWidth() + '<br />';
  cont += 'w_css : ' + $('.box1').width() + '<br />';
  cont += 'h_in : '  + $('.box1').innerHeight() + '<br />';
  cont += 'h_out : ' + $('.box1').outerHeight() + '<br />';
  cont += 'h_css : ' + $('.box1').height() + '<br />';

  $('#output').html(cont);

});
</script>

</body>
</html>

実行サンプルはこちら。
https://hp.dogrow.net/sample/00041/

(3) 結果

outerWidth, outerHeight : 要素の外郭のサイズ(borderの外側)
innerWidth, innerHeight : 要素の内郭のサイズ(borderの内側)
width, height : 要素の更に内郭のサイズ(paddingの内側)
※外郭・内郭とか用語が正しくないが自己納得できているのでよいか…


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です