jQuery 尺寸

在本教程中,你將學習如何使用 jQuery 獲取或設定元素框的尺寸,例如寬度和高度。

瞭解 jQuery Dimensions

jQuery 提供了幾種方法,如 height()innerHeight()outerHeight()width()innerWidth()outerWidth() 來獲取和設定 CSS 尺寸的元素。請檢視下圖以瞭解這些方法如何計算元素框的尺寸。

jQuery Dimensions

jQuery width()height() 方法

jQuery width()height() 方法分別獲取或設定 width 元素和 height 元素。此寬度和高度不包括元素的 paddingbordermargin。以下示例將返回 <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() 方法,因為它將 widthheight 屬性值作為無單位畫素值(例如 400)返回。然而,css("width")css("height") 方法以單位(例如 400px)返回值。

jQuery innerWidth()innerHeight() 方法

jQuery innerWidth()innerHeight() 方法分別獲取或設定元素的內部寬度內部高度。此內部寬度和高度包括元素的 padding ,但不包括 bordermargin。以下示例將在單擊按鈕時返回 <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() 方法分別獲取或設定元素的外部寬度外部高度。此外部寬度和高度包括元素上的 paddingborder ,但不包括 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>

你還可以得到外部寬度和高度,包括 paddingborder 還有 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>