jquery处理尺寸的方法-CSDN博客

本文链接：https://blog.csdn.net/xiaochouyu0703/article/details/84697400

jQuery 提供多个处理尺寸的重要方法：
width()设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth()返回元素的宽度（包括内边距）。
innerHeight()返回元素的高度（包括内边距）。
outerWidth()返回元素的宽度（包括内边距和边框）。
outerHeight()返回元素的高度（包括内边距和边框）。
outerWidth(true)返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true)返回元素的高度（包括内边距、边框和外边距）。

依照盒模型如下图：
[img]http://dl2.iteye.com/upload/attachment/0105/4511/f25894e2-0e32-3116-a890-c8919c9bc4fb.jpg[/img]


<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width: " + $("#div1").width() + "px</br>";
    txt+="Height: " + $("#div1").height() + "px</br>";
    txt+="Inner width: " + $("#div1").innerWidth() + "px</br>";
    txt+="Inner height: " + $("#div1").innerHeight()+ "px</br>";
    txt+="Outer width: " + $("#div1").outerWidth() + "px</br>";
    txt+="Outer height: " + $("#div1").outerHeight()+ "px</br>";
    txt+="Outer width(含margin): " + $("#div1").outerWidth(true) + "px</br>";
    txt+="Outer height(含margin): " + $("#div1").outerHeight(true)+"px";
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>
<div id="div1" style="height:150px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<button>显示 div 的尺寸</button>
</body>