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>