jQuery 尺寸
在本教程中，你将学习如何使用 jQuery 获取或设置元素框的尺寸，例如宽度和高度。
了解 jQuery Dimensions
jQuery 提供了几种方法，如 height() 、innerHeight() 、outerHeight() 、width() 、innerWidth() 和 outerWidth() 来获取和设置 CSS 尺寸的元素。请查看下图以了解这些方法如何计算元素框的尺寸。
jQuery width() 和 height() 方法
jQuery width() 和 height() 方法分别获取或设置 width 元素和 height 元素。此宽度和高度不包括元素的 padding、border 和 margin。以下示例将返回 <div> 元素的宽度和高度。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var divWidth = $("#box").width();
var divHeight = $("#box").height();
$("#result").html("Width: " + divWidth + ", " + "Height: " + divHeight);
});
});
</script>
同样，你可以通过将值作为参数包含在 width() and height() 方法中来设置元素的宽度和高度。值可以是字符串（数字和单位，例如 100px，20em 等）或数字。以下示例将 <div> 元素的宽度分别设置为 400 像素，高度设置为 300 像素。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#box").width(400).height(300);
});
});
</script>
注意： 如果要在数学计算中使用元素的宽度或高度，请 使用 jQuery width() 或 height() 方法，因为它将 width 和 height 属性值作为无单位像素值（例如 400）返回。然而，css("width") 或 css("height") 方法以单位（例如 400px）返回值。
jQuery innerWidth() 和 innerHeight() 方法
jQuery innerWidth() 和 innerHeight() 方法分别获取或设置元素的内部宽度和 内部高度。此内部宽度和高度包括元素的 padding ，但不包括 border 与 margin。以下示例将在单击按钮时返回 <div> 元素的内部宽度和高度。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var divWidth = $("#box").innerWidth();
var divHeight = $("#box").innerHeight();
$("#result").html("Inner Width: " + divWidth + ", " + "Inner Height: " + divHeight);
});
});
</script>
类似地，你可以通过将值作为参数传递给 innerWidth() and innerHeight() 方法来设置元素的内部宽度和高度。这些方法仅改变元素内容区域的宽度或高度以匹配指定的值。
例如，如果在将内部宽度设置为 400 像素之后，元素的当前宽度是 300 个像素并且左和右填充的总和等于 50 个像素而不是元素的新宽度，则是 350 个像素 New Width = Inner Width - Horizontal Padding 。同样，你可以在设置内部高度时估计高度的变化。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#box").innerWidth(400).innerHeight(300);
});
});
</script>
jQuery outerWidth() 和 outerHeight() 方法
jQuery outerWidth() 和 outerHeight() 方法分别获取或设置元素的外部宽度和 外部高度。此外部宽度和高度包括元素上的 padding 和 border ，但不包括 margin。以下示例将在单击按钮时返回 <div> 元素的外部宽度和高度。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var divWidth = $("#box").outerWidth();
var divHeight = $("#box").outerHeight();
$("#result").html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight);
});
});
</script>
你还可以得到外部宽度和高度，包括 padding 和 border 还有 margin 的元素。为此，只需指定外部宽度/高度方法的 true 参数，例如 outerWidth(true) 和 outerHeight(true) 。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var divWidth = $("#box").outerWidth(true);
var divHeight = $("#box").outerHeight(true);
$("#result").html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight);
});
});
</script>
类似地，你可以通过将值作为参数传递给 outerWidth() 和 outerHeight() 方法来设置元素的外部宽度和高度。这些方法仅改变元素内容区域的宽度或高度以匹配指定的值，如 innerWidth() 和 innerHeight() 方法一样。
例如，如果元素的当前宽度为 300 像素，并且左右填充的总和等于 50 像素，则左右边框的宽度之和为 20 像素，而新宽度为将外部宽度设置为 400 像素后的元素是 330 像素即 New Width = Outer Width - (Horizontal Padding + Horizontal Border) 。同样，你可以在设置外部高度时估计高度的变化。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#box").outerWidth(400).outerHeight(300);
});
});
</script>