I want to be able to calculate the width, in pixels, of an element that has the width css property set to 'auto'.
I have tried element.style.width but didn't work because it returned 'auto'. I notices that the jQuery function width() returns the length in px, but I cannot use jQuery to solve this, because it is not available in my page. So, does anybody know an equivalent method for jQuery width()?
Thanks.
I want to be able to calculate the width, in pixels, of an element that has the width css property set to 'auto'.
I have tried element.style.width but didn't work because it returned 'auto'. I notices that the jQuery function width() returns the length in px, but I cannot use jQuery to solve this, because it is not available in my page. So, does anybody know an equivalent method for jQuery width()?
Thanks.
Share Improve this question edited Oct 9, 2021 at 19:24 Michael Scott Asato Cuthbert 3,6383 gold badges24 silver badges56 bronze badges asked Jul 28, 2011 at 8:53 MadalinaMadalina 1,3076 gold badges15 silver badges25 bronze badges 2 |3 Answers
Reset to default 17jQuery 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/
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.
It basically comes down to .offsetWidth, but the jQuery code is a little more complicated due to cross-browser differences.
getWH()function in the jQuery source will reveal the implementation. (Called withname = "width".) – jensgram Commented Jul 28, 2011 at 9:01