jQuery 的 width() 函数的 Javascript 等价物是什么？

发布于 2024-11-27 06:10:27 字数 280 浏览 0 评论 0原文

我希望能够计算宽度 css 属性设置为 'auto' 的元素的宽度（以像素为单位）。

我尝试过 element.style.width 但没有成功，因为它返回了 'auto'。我注意到 jQuery 函数 width() 返回以 px 为单位的长度，但我无法使用 jQuery 来解决这个问题，因为它在我的页面中不可用。那么，有人知道 jQuery width() 的等效方法吗？

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苦行僧 2024-12-04 06:10:27

jQuery 在内部使用...

element.getBoundingClientRect().width

，它上面还有一些其他东西来处理浏览器差异。

它返回元素渲染的大小，其中 .offsetxx 根据盒模型返回大小。

element.getBoundingClientRect()

是获取元素“真实”尺寸的最准确方法。

这是 John Resig（jQuery 的作者）关于此事的帖子。

http://ejohn.org/blog/getboundingclientrect-is-awesome/

jQuery uses...

element.getBoundingClientRect().width

internally, it has some other stuff on top to deal with browser differences.

It returns an elements rendered size, where as .offsetxx returns sizes according to the box model.

element.getBoundingClientRect()

Is the most accurate way to get an elements "real" dimensions.

Here is a post by John Resig ( author of jQuery ) on the matter.

http://ejohn.org/blog/getboundingclientrect-is-awesome/

回复收藏 0 原文

冰之心 2024-12-04 06:10:27

在这上面浪费了 2 个小时。
对于我的情况，其他答案不起作用，因此结合其他答案和我将我的发现放入一篇带有示例的文章中，以便于阅读：

对于像 select 这样的元素，JQuery 中的 width() 与 JQuery 中的 clientWidth 相同JavaScript。

下面的示例代码，包括输出：

// 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

希望有帮助。

Wasted 2 hours on this.
For my case other answers did not work so combining others answers & my findings into one post with examples, for easy reading:

For an element like select, the width() in JQuery is same as clientWidth in JavaScript.

Sample code below, including output:

// 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

Hope that helps.

回复收藏 0 原文