jquery 宽度

jQuery 获取和设置元素宽度的方法

获取元素宽度

使用 .width() 方法可以获取匹配元素集合中第一个元素的宽度（不包含内边距、边框和外边距）。该方法返回一个数值，单位为像素。

var width = $('#element').width();

设置元素宽度

使用 .width(value) 方法可以设置匹配元素集合中每个元素的宽度。value 可以是一个数值（单位为像素）或一个字符串（如 "50%"）。

$('#element').width(200); // 设置为200像素
$('#element').width('50%'); // 设置为父元素宽度的50%

获取包含内边距的宽度

使用 .innerWidth() 方法可以获取元素的宽度，包含内边距（padding），但不包含边框和外边距。

var innerWidth = $('#element').innerWidth();

获取包含内边距和边框的宽度

使用 .outerWidth() 方法可以获取元素的宽度，包含内边距和边框，但不包含外边距。

var outerWidth = $('#element').outerWidth();

获取包含内边距、边框和外边距的宽度

通过传递 true 参数给 .outerWidth() 方法，可以获取包含内边距、边框和外边距的宽度。

var outerWidthWithMargin = $('#element').outerWidth(true);

获取窗口或文档的宽度

使用 $(window).width() 可以获取浏览器窗口的宽度，$(document).width() 可以获取整个文档的宽度。

var windowWidth = $(window).width();
var documentWidth = $(document).width();

注意事项

• 当元素隐藏时（display: none），.width() 方法可能无法正确返回值。
• 对于 inline 元素，.width() 方法通常返回 0，因为内联元素没有明确的宽度定义。
• 在设置宽度时，确保传递的值是有效的，否则可能导致布局问题。