Get width in pixels from element with style set with

Question

I have this element   lt div style  quot width  100   height  10px  quot  gt  lt  div gt   I want to get it s width in pixels  I just tried this  document getElementById  banner-contenedor   style width  Which returns 100   Is it possible to actually get the element s width in pixels with JavaScript

User · Answer

This jQuery worked for me       banner-contenedor   css  width      This will get you the computed width  http   api jquery com css

User · Answer

You can use offsetWidth  Refer to this post and question for more    x000D   x000D  console log  width     document getElementsByTagName  div   0  offsetWidth    px    x000D  div  border  1px solid  F00   x000D   lt div style  width  100   height  10px   gt  lt  div gt  x000D   x000D   x000D

User · Answer

Try jQuery       banner-contenedor   width

User · Answer

You want to get the computed width  Try   offsetWidth      I e  this offsetWidth  50px  or var w this offsetWidth   You might also like this answer on SO

User · Answer

Not a single answer does what was asked in vanilla JS  and I want a vanilla answer so I made it myself   clientWidth includes padding and offsetWidth includes everything else  jsfiddle link   What you want is to get the computed style  jsfiddle link    function getInnerWidth elem        return parseFloat window getComputedStyle elem  width       EDIT  getComputedStyle is non-standard  and can return values in units other than pixels  Some browsers also return a value which takes the scrollbar into account if the element has one  which in turn gives a different value than the width set in CSS   If the element has a scrollbar  you would have to manually calculate the width by removing the margins and paddings from the offsetWidth   function getInnerWidth elem        var style   window getComputedStyle elem       return elem offsetWidth - parseFloat style paddingLeft  - parseFloat style paddingRight  - parseFloat style borderLeft  - parseFloat style borderRight  - parseFloat style marginLeft  - parseFloat style marginRight       With all that said  this is probably not an answer I would recommend following with my current experience  and I would resort to using methods that don t rely on JavaScript as much

User · Answer

yourItem style  cssProperty     this way you can call the property string dynamically

User · Answer

document getElementById  banner-contenedor   clientWidth

[javascript] Get width in pixels from element with style set with %?

Examples related to javascript

Examples related to html

Examples related to css