jQuery | Width()

jQuery | Width() 是 jQuery 库中的一个函数，用于获取或设置 HTML 元素的宽度。该函数可以返回元素的宽度值（不包括 padding、border 和 margin），也可以将元素的宽度设置为指定的值。

语法

// 获取元素的宽度
$(selector).width()

// 设置元素的宽度
$(selector).width(value)

• selector：要操作的 HTML 元素的选择器
• value：可选，要设置的宽度值。可以是数字、字符串、函数或返回值的函数。

示例

1. 获取元素宽度

下面的代码将返回 div 元素的宽度值，不包括 padding、border 和 margin：

<div id="myDiv" style="width: 200px; padding: 10px; border: 1px solid #000;"></div>

<script>
var width = $('#myDiv').width();
console.log(width); // 200
</script>

2. 设置元素宽度

下面的代码将把 div 元素的宽度设置为 300px：

<div id="myDiv" style="width: 200px; padding: 10px; border: 1px solid #000;"></div>

<script>
$('#myDiv').width(300);
</script>

3. 动态设置元素宽度

下面的代码将实现点击按钮时 div 元素的宽度动态增加：

<div id="myDiv" style="width: 200px; padding: 10px; border: 1px solid #000;"></div>

<button id="increaseWidthBtn">增加宽度</button>

<script>
$('#increaseWidthBtn').click(function() {
  var currentWidth = $('#myDiv').width();
  $('#myDiv').width(currentWidth + 50);
});
</script>

4. 函数式设置元素宽度

下面的代码将通过函数式设置 div 元素的宽度。该函数将基于元素当前的宽度来计算新的宽度值。

<div id="myDiv" style="width: 200px; padding: 10px; border: 1px solid #000;"></div>

<button id="increaseWidthBtn">增加宽度</button>

<script>
function getNewWidth() {
  var currentWidth = $('#myDiv').width();
  return currentWidth + 50;
}

$('#increaseWidthBtn').click(function() {
  $('#myDiv').width(getNewWidth);
});
</script>

返回值

• 获取元素宽度时，返回元素的宽度值（不包括 padding、border 和 margin）
• 设置元素宽度时，返回 jQuery 对象（用于链式调用）