当前位置：首页 > jquery

jquery 宽度

2026-03-02 13:14:22jquery

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

在jQuery中，可以使用.width()方法来获取或设置元素的宽度。以下是具体的用法和示例：

获取元素的宽度

使用.width()方法不带参数时，可以获取匹配元素中第一个元素的宽度（单位：像素）。返回的是一个不包含padding、border和margin的纯宽度值。

var width = $('#element').width();
console.log(width); // 输出元素的宽度

设置元素的宽度

通过传递一个数值（单位为像素）或字符串（如百分比）作为参数，可以设置元素的宽度。

// 设置为固定像素值
$('#element').width(200);

// 设置为百分比
$('#element').width('50%');

获取或设置包含内边距(padding)的宽度

如果需要获取或设置包含padding的宽度，可以使用.innerWidth()方法。

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

// 设置包含padding的宽度
$('#element').innerWidth(250);

获取或设置包含边框(border)的宽度

如果需要获取或设置包含border的宽度，可以使用.outerWidth()方法。默认情况下，.outerWidth()不包含margin。

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

// 设置包含border的宽度
$('#element').outerWidth(300);

获取或设置包含外边距(margin)的宽度

通过传递true作为参数，.outerWidth()可以包含margin。

// 获取包含margin的宽度
var outerWidthWithMargin = $('#element').outerWidth(true);

// 设置包含margin的宽度
$('#element').outerWidth(350, true);

示例代码

以下是一个完整的示例，展示如何获取和设置元素的宽度：

jquery 宽度

// 获取宽度
var originalWidth = $('#box').width();
console.log('原始宽度:', originalWidth);

// 设置宽度为200px
$('#box').width(200);

// 获取包含padding的宽度
var innerWidth = $('#box').innerWidth();
console.log('包含padding的宽度:', innerWidth);

// 设置包含padding的宽度为250px
$('#box').innerWidth(250);

// 获取包含border的宽度
var outerWidth = $('#box').outerWidth();
console.log('包含border的宽度:', outerWidth);

// 设置包含border和margin的宽度为300px
$('#box').outerWidth(300, true);