English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

jQuery width() 方法

أساليب HTML/CSS jQuery

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-إرجاع عرض العنصر الحالي

أساليب HTML/CSS jQuery