English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
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) | تحديد دالة تعود بعرض العنصر المحدد
|