jQuery 中 width() 方法用法实例

一、什么是 width() 方法

width() 方法是 jQuery 中常用的用于获取元素宽度的方法。它可以获取一个元素的宽度，但是不包括边框和外边距。如果要获取包含边框和外边距的宽度，需要使用 outerWidth() 或 outerWidth(true) 方法。

二、width() 方法的语法和参数

width() 方法的语法如下：

$(selector).width();

其中，selector 参数是选择器，用于指定要获取宽度的元素。

三、width() 方法的示例说明

1. 获取元素的宽度

下面是一条示例用于获取元素的宽度：

<div id="box" style="width:100px; height:50px;"></div>

var w = $("#box").width();
console.log(w); // 100

上述代码，使用 $("#box").width() 获取到元素 #box 的宽度为 100。

2. 设置元素的宽度

可以使用 width(value) 方法设置元素的宽度，其中 value 是要设置的宽度值，可以是数字或者包含单位的字符串，如 100px。例如：

<div id="box" style="width:100px; height:50px;"></div>

$("#box").width("200px");

上述代码，将元素 #box 的宽度设置为 200px。

四、注意事项

在使用 width() 方法时要注意以下问题：

• 如果要获取包含外边距和边框的宽度，需要使用 outerWidth() 或 outerWidth(true) 方法。
• 如果多个元素被选中，那么 width() 方法只会返回第一个元素的宽度。
• 如果元素被隐藏（设置为 display:none 或者 visibility:hidden），那么使用 width() 方法获取的宽度为 0。如果需要获取隐藏元素的宽度，可以使用 $(selector).width() 方法，selector 参数是指定元素的选择器。

感谢阅读这篇文章，希望对你了解 width() 方法的使用有所帮助。