JS DOM: Find Element Width

By Xah Lee. Date: . Last updated: .

Find Element Width

ele.offsetWidth
  • The visible width of element ele.
  • By default, it includes padding, border, but not margin.
  • Does not consider 2D Transform.
ele.clientWidth

width, includes padding, but not border nor margin.

ele.getBoundingClientRect().width

Return the rendered width of the bounding box. For example, it takes consideration when 2D transform is used to scale the element.

Example with 2D Transform

XYZ
<div id="box_gsBVP">
XYZ
</div>
@scope {
 #box_gsBVP {
  width: 100px;
  padding: 4px;
  border: dotted 3px red;
  margin: 7px;
  box-sizing: content-box;
  transform: rotate(30deg);
 }
}