Get width of div with javascript

Question

Why document.getElementById("mydiv").style.width doesn't return the width of mydiv ? It returns an empty string. Some people suggested using offsetWidth, but it doesn't make sense to me why you can't get it from style.width.

Please share a small demo of this where we can see the issue in action. — palaѕн, Mar 27 '20 at 14:16
check this https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth https://stackoverflow.com/questions/4787527/how-to-find-the-width-of-a-div-using-vanilla-javascript — Hitesh Anshani, Mar 27 '20 at 14:17
It would only return width value if set by a style via css, otherwise you would need use javascript width. https://stackoverflow.com/a/26718430/10634638 — estinamir, Mar 27 '20 at 14:19
.style.width if there a inline style on the container. you may check .offsetWidth for the container — Riku, Mar 27 '20 at 14:23

score 5 · Answer 1 · edited Mar 28 '20 at 11:13

The topic of DOM element dimensions is complicated.

You probably want one of :

offsetWidth

The HTMLElement.offsetWidth read-only property returns the layout width of an element as an integer.

Typically, offsetWidth is a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars (if rendered). It does not include the width of pseudo-elements such as ::before or ::after.

If the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned.

clientWidth

The Element.clientWidth property is zero for inline elements and elements with no CSS; otherwise, it's the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present).

When clientWidth is used on the root element (the <html> element), (or on <body> if the document is in quirks mode), the viewport's width (excluding any scrollbar) is returned. This is a special case of clientWidth.

getBoundingClientRect

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

The element's size is equal to its width/height + padding in the case that the standard box model is being used, or width/height only if box-sizing: border-box has been set on it.

jQuery hides some of this complexity behind a .width method.

const $ = document.querySelector.bind(document)
const d1 = $('#unstyled')
const d2 = $('#stylesheet')
const d3 = $('#inline')
const details = $('#details')

details.innerHTML = (`
<table>
  <tr>
<td><h2>A</h2> offsetWidth: '${d1.offsetWidth}', clientWidth: '${d1.clientWidth}', getBoundingClientRect().width: '${d1.getBoundingClientRect().width}', style.width: '${d1.style.width}'
</td>
  </tr>
  <tr>
<td><h2>B</h2> offsetWidth: '${d2.offsetWidth}', clientWidth: '${d2.clientWidth}', getBoundingClientRect().width: '${d2.getBoundingClientRect().width}', style.width: '${d2.style.width}'
</td>
  </tr>
  <tr>
<td><h2>C</h2> offsetWidth: '${d3.offsetWidth}', clientWidth: '${d3.clientWidth}', getBoundingClientRect().width: '${d3.getBoundingClientRect().width}', style.width: '${d3.style.width}'
</td>
  </tr>
</table>`)

* {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: .9rem;
}
#stylesheet {
  line-height: 50px;
  width: 100px;
  height: 50px;
  text-align: center;
  padding: 5px; 
  margin: 5px;
  border: 5px solid red;
}
div {       
  display: inline-block;
  box-shadow: 0 0 0px 1px silver inset;
}
table {
  border: 0px;
}
td {
  text-align: left;
  padding: 0px;
}

<div id="unstyled">A</div>
<div id="stylesheet">B</div>
<div id="inline" style="width:100px;height:50px;text-align: center;line-height: 50px; padding: 5px; margin: 5px; border: 5px solid red;">C</div>
<section id="details"></section>

Get width of div with javascript

1 Answers1