I am trying to dynamically access the width of an element through jQuery using .width(). In developer tools I can see element's width as 37.333Px, where as .width() gives 38.33334Px.
Width in developer tools
Width from .width()
In this situation difference is of 1px, but sometimes it difference is in decimals. Why there is a such difference? Where am I going wrong? Is there any other to get exact width.
We can get width by few methods listed below,
width() - Sets or returns the width of an element
innerWidth() - Returns the width of an element (includes padding)
outerWidth() - Returns the width of an element (includes padding and border).
outerWidth(true) - Returns the width of an element (includes padding, border and margin).
Use .width() only when DOM is ready to give you the exact value.
Since it takes time to adjust itself while parsing.
So You need to use $(document).ready(... or $(window).load...
.width() returns more than expected. If there is any different value, .outerWidth(true) will return a greater value.
The value reported by .width() is not guaranteed to be accurate when the element or its parent is hidden. Also, dimensions may be incorrect when the page is zoomed by the user;
Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "width" ) rather than .width().
Also you should be more specific when selecting the element. Going by XPath is never a good idea as the smallest change in the tree structure will break your code. Try to use an ID, Class, etc to make the selection
I have same question before and got answer this:
There are two actions taken by the browser:
Firstly: On the percentage itself - for example - Internet Explorer 7-11 will truncate any percentage to 2 decimal places, more modern browsers will round to a large number of decimal places.
Then the second action is on the resultant pixel value calculated using that percentage.
Example:
We have a container with a width of 1325px.
Inside that we have a box with a width set to 50.5290112% in the CSS.
This should give us a pixel width for the box of 669.5093984px by using the calculation (1325 / 100) x 50.5290112.In Internet Explorer 8 the width of the box is actually 669px.
What is happening in IE8 is that the browser is truncating the percentage to 50.52%.
Which results in a pixel width of 669.39px by using the calculation (1325 / 100) x 50.52.
The browser then rounds this down to the nearest integer, resulting in an actual width of 669px.
.getBoundingClientRect() ?$('whatever')[0].getBoundingClientRect().width
