我希望能够计算宽度 css 属性设置为 'auto' 的元素的宽度（以像素为单位）。
我尝试了element.style.width，但没有成功，因为它返回了'auto'。我注意到 jQuery 函数 width() 返回以 px 为单位的长度，但我无法使用 jQuery 来解决这个问题，因为它在我的页面中不可用。那么，有人知道 jQuery width() 的等效方法吗？
谢谢。
【问题讨论】：
getWH() 函数将揭示实现。 （使用name = "width" 调用。）
标签： javascript jquery css width
jQuery 使用...
element.getBoundingClientRect().width
在内部，它还有一些其他的东西来处理浏览器的差异。
它返回一个元素呈现的大小，其中 .offsetxx 根据盒子模型返回大小。
element.getBoundingClientRect()
是获取元素“真实”尺寸的最准确方法。
这是 John Resig（jQuery 的作者）关于此事的帖子。
【讨论】：
$el.width() 和 $el.outerWidth() 经常给我零，而el.getBoundingClientRect().width 给我正确的值，在最新的 Firefox 和 Chrome 上，使用 jQuery 2.1.4
在这上面浪费了 2 个小时。
对于我的情况，其他答案不起作用，因此将其他答案和我的发现与示例合并到一篇文章中，以便于阅读：
对于像select 这样的元素，JQuery 中的width() 与 JavaScript 中的clientWidth 相同。
下面的示例代码，包括输出：
// Add jQuery library in HTML:
// <head>
// <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
// </head>
let eleId = 'myselectid1'; // NOTE: Provide your element id below
// jQuery
console.log( $('#' + eleId).width() );
// JavaScript
let ele = document.getElementById(eleId);
console.log(ele.clientWidth); // 58 // includes padding into calculation
console.log(ele.offsetWidth); // 60 // includes border size and padding into width calculation
console.log(ele.getBoundingClientRect().width); // 60 // includes border size and padding into width calculation
console.log(window.getComputedStyle(ele, null).getPropertyValue("width")); // 60px (note the px in value, you may also get values like 'auto') // all dynamic values for all CSS properties, IE>=9
console.log(ele.style.height); // empty string // if you set it earlier, you would get this
console.log(ele.innerWidth); // undefined // only works on window object, not on element like select/ div - fails in older IE<9
希望对您有所帮助。
【讨论】：
基本上归结为.offsetWidth，但是由于跨浏览器的差异，jQuery代码稍微复杂一些。
【讨论】：