如何在jQuery中获取与原生JS的clientWidth一致的宽度值？

先明确原生JavaScript与jQuery各宽度方法的计算范围：

• 原生clientWidth：元素内容宽度 + 左右内边距（padding），但会自动减去垂直滚动条的宽度（若元素存在垂直滚动条），且不包含边框（border）和外边距（margin）。
• jQuery width()：仅计算内容宽度，不含padding、border、margin。
• jQuery innerWidth()：计算内容宽度 + 左右padding，不含border、margin，但不会减去垂直滚动条宽度。
• jQuery outerWidth()：默认计算内容宽度 + 左右padding + 左右border；传入true时再加上左右margin，同样不考虑滚动条宽度。

你的场景中，目标元素应该存在垂直滚动条，原生clientWidth自动扣除了滚动条宽度得到577，而jQuery的innerWidth()因包含滚动条宽度返回588，width()仅计算内容宽度所以是568。

直接通过jQuery对象获取原生DOM元素，调用clientWidth即可得到与原生JS一致的值：

$('#status_across_leagues')[0].clientWidth // 返回577
// 或使用get()方法
$('#status_across_leagues').get(0).clientWidth

内容的提问来源于stack exchange，提问作者Michael Shackelford