jquery 宽度

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

使用 jQuery 可以方便地获取和设置元素的宽度。以下是常用的方法：

获取元素宽度

// 获取元素的内容宽度（不包括 padding、border、margin）
var width = $('#element').width();

// 获取元素的包含 padding 的宽度
var innerWidth = $('#element').innerWidth();

// 获取元素的包含 padding 和 border 的宽度
var outerWidth = $('#element').outerWidth();

// 获取元素的包含 padding、border 和 margin 的宽度
var outerWidthWithMargin = $('#element').outerWidth(true);

设置元素宽度

// 设置元素的内容宽度（数字类型，单位为像素）
$('#element').width(200);

// 设置元素的内容宽度（字符串类型，可带单位）
$('#element').width('50%');

获取窗口和文档的宽度

// 获取浏览器窗口的宽度
var windowWidth = $(window).width();

// 获取文档的宽度
var documentWidth = $(document).width();

注意事项

• width() 方法返回的是无单位的像素值（数字类型）
• 设置宽度时可以直接传递数字（默认单位为像素）或带单位的字符串
• 这些方法获取的是元素的即时计算值，可能受 CSS 盒模型影响
• 对于隐藏元素，某些宽度方法可能返回 0

响应式设计中的应用

可以通过监听窗口大小变化来动态调整元素宽度：

$(window).resize(function() {
    var newWidth = $(window).width() * 0.8;
    $('#responsive-element').width(newWidth);
});

以上方法提供了灵活的方式来控制和响应页面元素的宽度变化。