jQuery 中 css('width') 和 width() 方法的区别

在使用 jQuery 编写前端页面时，我们经常需要操作和获取元素的样式。其中，css('width') 和 width() 方法都可以用来获取元素的宽度值。但两者之间有什么区别呢？

css('width') 方法

css('width') 方法用于获取元素的 width 样式属性值。它返回的是一个字符串类型的值，表示元素的宽度值，不包括内边距和边框。

$(element).css('width');

示例：

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

var boxWidth = $('#box').css('width');
console.log(boxWidth); // 输出结果为 "200px"

width() 方法

width() 方法和 css('width') 方法类似，用于获取元素的宽度值。但 width() 方法返回的是一个数字，表示元素的宽度值，单位为像素（px），不包括内边距和边框。

$(element).width();

示例：

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

var boxWidth = $('#box').width();
console.log(boxWidth); // 输出结果为 200

区别

• 返回值类型不同：css('width') 方法返回的是字符串类型，width() 方法返回的是数字类型。
• 单位不同：css('width') 方法返回的是带单位的字符串值，width() 方法返回的是不带单位的数字值。
• 包含的内容不同：css('width') 方法返回的是元素的宽度，不包括内边距和边框；width() 方法返回的是元素的宽度，包括内边距和边框。

需要注意的是，在设置元素的宽度时，两者的语法也是不同的。css('width', value) 用于设置元素的 width 样式属性值，而 width(value) 用于设置元素的宽度值。