jQuery 的 width() 函数的 Javascript 等价物是啥？
Posted
技术标签:
【中文标题】jQuery 的 width() 函数的 Javascript 等价物是啥？【英文标题】：What is the Javascript equivalent for jQuery's width() function?jQuery 的 width() 函数的 Javascript 等价物是什么？ 【发布时间】：2011-10-14 22:37:29 【问题描述】：我希望能够计算宽度 css 属性设置为 'auto' 的元素的宽度（以像素为单位）。
我尝试了element.style.width，但没有成功，因为它返回了'auto'。我注意到 jQuery 函数 width() 返回以 px 为单位的长度，但我无法使用 jQuery 来解决这个问题，因为它在我的页面中不可用。那么，有人知道 jQuery width() 的等效方法吗？
谢谢。
【问题讨论】：
可能相关：Quick resource to learn more about all the JS height's. jQuery source 中的getWH() 函数将揭示实现。 （使用name = "width" 调用。）
【参考方案1】：
jQuery 使用...
element.getBoundingClientRect().width
在内部，它还有一些其他的东西来处理浏览器的差异。
它返回一个元素呈现的大小，其中 .offsetxx 根据盒子模型返回大小。
element.getBoundingClientRect()
是获取元素“真实”尺寸的最准确方法。
这是 John Resig（jQuery 的作者）关于此事的帖子。
http://ejohn.org/blog/getboundingclientrect-is-awesome/【讨论】：
实际上，$el.width() 和 $el.outerWidth() 经常给我零，而el.getBoundingClientRect().width 给我正确的值，在最新的 Firefox 和 Chrome 上，使用 jQuery 2.1.4【参考方案2】：
在这上面浪费了 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
希望对您有所帮助。
【讨论】：
【参考方案3】：基本上归结为.offsetWidth，但是由于跨浏览器的差异，jQuery代码稍微复杂一些。
【讨论】：
它在各种浏览器中的实现也大相径庭，因此使用像 jQuery 这样经过良好测试的东西是有意义的..以上是关于jQuery 的 width() 函数的 Javascript 等价物是啥？的主要内容，如果未能解决你的问题，请参考以下文章