3,498 views
この記事は最終更新から 2394日 が経過しています。
(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://www.dogrow.net/hp/sample/00041/
(3) 結果
outerWidth, outerHeight : 要素の外郭のサイズ（borderの外側）
innerWidth, innerHeight : 要素の内郭のサイズ（borderの内側）
width, height : 要素の更に内郭のサイズ（paddingの内側）
※外郭・内郭とか用語が正しくないが自己納得できているのでよいか…
