jQuery width函数

jQuery width()函数详解

width()函数是jQuery中的一个常用方法，用于获取或设置元素的宽度（不包括 padding, border 和 margin）。本文将对该函数进行详细讲解。

获取元素的宽度

要获取元素的宽度，可以使用下面的方法：

var width = $(selector).width();

其中，selector 是需要获取宽度的元素的选择器。该方法返回的值是一个数字，单位为像素。

示例：

<div id="demo" style="width: 300px"></div>

var width = $('#demo').width();
console.log(width); // 输出 300

设置元素的宽度

要设置元素的宽度，可以使用下面的方法：

$(selector).width(value);

其中，selector 是需要设置宽度的元素的选择器。value 是需要设置的宽度值，可以为一个数字或字符串。如果是数字，单位为像素；如果是字符串，可以使用 px, %, em 等多种单位。

示例：

<div id="demo"></div>

// 设置宽度为 500 像素
$('#demo').width(500);

// 设置宽度为 50%，当浏览器窗口大小改变时，元素宽度自动调整
$('#demo').width('50%');

获取包括 padding 的宽度

如果需要获取元素宽度包括 padding，可以使用下面的方法：

var width = $(selector).outerWidth();

该函数不接受任何参数，返回的值是一个数字，单位为像素。

示例：

<div id="demo" style="width: 300px; padding: 10px;"></div>

var width = $('#demo').outerWidth();
console.log(width); // 输出 320（300 + 10 + 10）

获取包括 padding 和 border 的宽度

如果需要获取元素宽度包括 padding 和 border，可以使用下面的方法：

var width = $(selector).outerWidth(true);

该函数只有一个参数 true，表示包括元素的 border 和 padding。返回的值是一个数字，单位为像素。

示例：

<div id="demo" style="width: 300px; padding: 10px; border: 5px solid black;"></div>

var width = $('#demo').outerWidth(true);
console.log(width); // 输出 340（300 + 10 + 10 + 5 + 5）

总结

width() 函数是 jQuery 中常用的一个获取和设置元素宽度的方法，支持获取和设置元素宽度的多种方式和多个参数，可以很好地满足不同的需求。在使用过程中建议根据实际需要，采用上述方法选择合适的参数和形式进行使用。