详细介绍jQuery.outerWidth() 函数具体用法

当我们需要获取一个元素的外部宽度时，可以使用jQuery提供的outerWidth()函数。下面对这个函数具体的用法进行详细介绍：

语法

$(selector).outerWidth([includeMargin]);

• selector：必选参数，用于指定要操作的元素。
• includeMargin：可选参数，一个布尔值，表示是否将元素的margin值计算在内。默认为false。

返回值

该方法返回一个表示元素外部宽度的整数值（单位：像素）。

示例1

HTML代码如下：

<div id="box1" style="width: 200px; height: 100px; padding: 20px; border: 2px solid black;">
    这是一个盒子。
</div>
<div id="box2" style="width: 200px; height: 100px; padding: 20px; border: 2px solid black; margin: 20px;">
    这也是一个盒子。
</div>

我们通过下面的代码可以分别获取上面两个盒子的外部宽度，其中第一个盒子的外部宽度为：244px（200 + 2 * 2 + 2 * 20），第二个盒子的外部宽度为：284px（200 + 2 * 2 + 2 * 20 + 2 * 20）。

var outerWidth1 = $('#box1').outerWidth();
var outerWidth2 = $('#box2').outerWidth(true);
console.log('outerWidth1:', outerWidth1); // 输出：244
console.log('outerWidth2:', outerWidth2); // 输出：284

示例2

HTML代码如下：

<div id="box" style="width: 200px; height: 100px; padding: 20px; border: 2px solid black;">
    <p>这是一个盒子。</p>
</div>

我们可以通过如下的代码获取这个盒子的外部宽度，外部宽度为：244px（200 + 2 * 2 + 2 * 20）。

var outerWidth = $('#box').outerWidth();
console.log('outerWidth:', outerWidth); // 输出：244

以上就是jQuery.outerWidth() 函数的详细用法介绍。如果需要获取一个元素的外部高度也可以使用outerHeight()函数。