Why is my clientWidth and offsetWidth equal?

Question

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);

#div1 {
  height: 5000px;
  width: 5000px;
  background-color: #000000;
}

<div id="mydiv">
  <div id="div1"></div>
</div>

I have a div on a webpage where the content requires a vertical scrollbar. Using javascript, I'm trying to calculate the offsetWidth and clientWidth so that I can ultimately calculate the width of the vertical scrollbar but apparently they are equal. I have:

html:

<div id="mydiv">
  <div id="div1"></div>
</div>

css:

#div1 {
  height: 5000px;
  width: 5000px;
  background-color: #000000;
}

js:

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);

Does this answer your question? [Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively](https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively) — Akhil Aravind, Feb 18 '20 at 04:40
I was reading that earlier. It seems to imply that offsetWidth includes the scrollbar. But according to the code I have above, it doesn't..? How can I get the width including the scrollbar? — Normajean, Feb 18 '20 at 05:09
In your snippet you dont have a scroll bar, then how can it include scrollbar wisth ?? — Akhil Aravind, Feb 18 '20 at 05:12
There's a scrollbar for me. Should be right there on the right hand side..? — Normajean, Feb 18 '20 at 05:26
scrollbar is for the snippet, not the content. give smaller width to the outer container and add `oveflow:scroll`, then you can see different values. — Akhil Aravind, Feb 18 '20 at 05:42
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/208021/discussion-between-akhil-aravind-and-normajean). — Akhil Aravind, Feb 18 '20 at 05:53

score 1 · Answer 1 · edited Feb 18 '20 at 05:03

Main difference between clientWidth and offsetWidth :

(1) clientWidth is the inner width (ie. the space inside an element including padding but excluding borders and scrollbars)

(2) offsetWidth is the outer width (ie. the space occupied by the element, including padding and borders)

As I can see in your CSS border and scrollbars is missing that is why you are getting same width in both case.

I have made updated CSS and now you will get different values. Please check below snippet:

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);

#mydiv {
        padding: 20px;
        border: 20px solid red;
      }

<div id="mydiv">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
  </div>

score 1 · Answer 2 · answered Feb 18 '20 at 05:58

1

Take a look at the two snippet, you can see the difference with scrollbar and without scrollbar.

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);

#div1 {
  height: 100px;
  width: 200px;
  background-color: #000000;
}
#mydiv{
  height:80px;
  width:160px;
  overflow:scroll
}

<div id="mydiv">
  <div id="div1"></div>
</div>

Below snippet has no scrollbar and overflow, so the client width and offset width are same

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);

#div1 {
  height: 100px;
  width: 200px;
  background-color: purple;
}

<div id="mydiv">
  <div id="div1"></div>
</div>

answered Feb 18 '20 at 05:58

Akhil Aravind

5,741
16
35

I was trying to change my site code a bit to make this solution work. But really I can't specify a height on the child div because its dynamic. As you said, there are two different cases when a scrollbar appears. One is to accommodate a child div that is larger than its parent div, as you cover above. But in my case the scrollbar is for content that is larger than the screen. For this latter case, clientWidth doesn't seem to work. – Normajean Feb 18 '20 at 07:21
@Normajean what is your exact problem ? can you share that – Akhil Aravind Feb 18 '20 at 07:22
I'm trying to find the width of the scrollbar – Normajean Feb 18 '20 at 07:23
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth https://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes https://stackoverflow.com/questions/8079187/how-to-calculate-the-width-of-the-scroll-bar Refer these links, this will help you find it – Akhil Aravind Feb 18 '20 at 07:28

Why is my clientWidth and offsetWidth equal?

2 Answers2