jQuery 获取DIV各种尺寸示例-实例在线编辑器(cainiaojc.com)

<!DOCTYPE html>
<html>
<title>jQuery 获取DIV各种尺寸示例 - 基础教程(cainiaojc.com)</title>

<head>
<style>
div {
  height: 200px;
  width:500px;
  margin: 5px;
  padding: 10px;
  margin-bottom: 15px;
  border: 3px solid lightgreen;
  background-color: rgba(144, 238, 144, .4);
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  let div = $("div");
  $("button").click(function(){
    var txt = "";
    txt += "div的宽度: " + div.width() + "<br>";
    txt += "div 宽度，包含内边距: " + div.innerWidth() + "<br>";
    txt += "div 宽度，包含内边距、边框: " + div.outerWidth() + "<br>";
    txt += "div 宽度，包含内边距、边框、外边距: " + div.outerWidth(true) + "<br><br>";
  
    txt += "div的高度: " + div.height() + "<br>";
    txt += "div 高度，包含内边距: " + div.innerHeight() + "<br>";
    txt += "div 的高度（包括内边距、边框）: " + div.outerHeight() + "<br>";
    txt += "div 的高度（包括内边距、边框、外边距）: " + div.outerHeight(true) + "<br>";
    div.html(txt);
  });
});
</script>
</head>
<body>

<button>显示DIV尺寸</button>
<p> width()-返回元素的宽度。</p>
<p> innerWidth()-返回元素的宽度（包括内边距）= width+padding。</p>
<p> outerWidth()-返回元素的宽度（包括内边距、边框）= width+padding+border。</p>
<p> outerWidth（true）-返回元素的宽度（包括内边距，边框和边距）= width+padding+border+margin。</p>
<hr>
<p> height()-返回元素的高度。</p>
<p> innerHeight()-返回元素的高度（包括内边距）= height+padding。</p>
<p> outerHeight()-返回元素的高度（包括内边距、边框）= height+padding+border。</p>
<p> outerHeight（true）-返回元素的高度（包括内边距、边框和外边距）= height+padding+border+margin。</p>

</body>
</html>