编辑这个页面须要登录或更高权限！

jQuery width() 方法

jQuery HTML/CSS 方法

width()方法获取或设置所选元素的宽度。

当使用width()方法获取宽度时，它将返回第一个选定元素的宽度。

当使用width()方法设置宽度时，它将设置所有选定元素的宽度。

如下图所示，width()方法不包含填充，边框或边距：

宽度

宽度值也可以是相对的。如果为值提供了前导+=或-=字符序列，则通过从当前值中加上或减去给定的数字来计算目标宽度（例如width（“-= 250”））。

语法：

得到宽度：

$(selector).width()

设置宽度：

$(selector).width(value)

使用函数设置宽度：

$(selector).width(function(index, currentWidth))

实例

获取DIV元素的宽度：

$("div").click(function(){
  $(this).width();
});
测试看看‹/›

设置所有段落的宽度：

$("button").click(function(){
  $("p").width(250);
});
测试看看‹/›

使用不同的单位设置所有段落的宽度：

$("#btn1").click(function(){
  $("p").width(250);
});
$("#btn2").click(function(){
  $("p").width("7em");
});
$("#btn3").click(function(){
  $("p").width("100vw");
});
测试看看‹/›

单击按钮时，减小所有段落的宽度（使用函数）：

$("button").click(function(){
  $("p").width(function(i, val){
        return val - 50;
  });
});
测试看看‹/›

width()方法还能够找到窗口和文档的宽度：

$(window).width();// 返回浏览器视口的宽度
$(document).width();  //返回HTML文档的宽度
测试看看‹/›

显示width()，height()，innerHeight()，innerWidth()，outerWidth()和outerHeight()之间的差异：

$("button").click(function(){
  $("div").width();
  $("div").innerWidth();
  $("div").outerWidth();
  $("div").height();
  $("div").innerHeight();
  $("div").outerHeight();
});
测试看看‹/›

参数值

参数描述
value表示像素数的整数，或附加了可选度量单位的整数（作为字符串）
function(index, currentWidth)指定一个函数，该函数返回所选元素的宽度

  • index-返回元素在集合中的索引位置

  • currentWidth-返回所选元素的当前宽度

jQuery HTML/CSS 方法

jQuery 遍历方法jQuery HTML/CSS 方法