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>