javascript - Observe size change of element - Stack Overflow

This is not a duplicate! I'm not satisfied with the result of other answers. If you still think it is a duplicate, please ment it before why you think it is!

---

I have to observe size changes of elements. I've tried to do it by creating a setter on the offsetWidth property like this:

const div = document.querySelector("div");

div.addEventListener("resize", console.log);
div.addEventListener("click", () => console.log(div.offsetWidth));


let width = div.offsetWidth;
Object.defineProperty(div, "offsetWidth", {
    get: () => width,
  set: val => {
    width = val;
    div.dispatchEvent(new Event("resize"));
  }
});

document.querySelector("button").onclick = () => div.style.width = "200px";

div {
  background-color: #f00;
  width: 300px;
  height: 300px;
}

<div></div>
<button>
Set size
</button>

This is not a duplicate! I'm not satisfied with the result of other answers. If you still think it is a duplicate, please ment it before why you think it is!

---

I have to observe size changes of elements. I've tried to do it by creating a setter on the offsetWidth property like this:

const div = document.querySelector("div");

div.addEventListener("resize", console.log);
div.addEventListener("click", () => console.log(div.offsetWidth));


let width = div.offsetWidth;
Object.defineProperty(div, "offsetWidth", {
    get: () => width,
  set: val => {
    width = val;
    div.dispatchEvent(new Event("resize"));
  }
});

document.querySelector("button").onclick = () => div.style.width = "200px";

div {
  background-color: #f00;
  width: 300px;
  height: 300px;
}

<div></div>
<button>
Set size
</button>

Click on the red box to log the size. Then press the button. Nothing happens. If you click the box again, it will still show the old size. Why does this not work?

• javascript
• html
• resize
• offsetwidth

Share Improve this question Follow edited Feb 23, 2021 at 6:47 blaumeise20 asked Feb 19, 2021 at 17:46 blaumeise20blaumeise20 2,2201111 silver badges2626 bronze badges 2

• 4 Have you considered a ResizeObserver? – ray Commented Feb 19, 2021 at 17:49
• You don't set offsetWidth (it's derived and read-only anyway) so your setter never runs. – ray Commented Feb 19, 2021 at 19:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Have you considered using a ResizeObserver?

// get references to the elements we care about
const div = document.querySelector('.demo');
const button = document.querySelector('button');

// wire the button to resize the div
button.addEventListener('click', () => div.style.width = `${Math.random() * 100}%`);

// set up an observer that just logs the new width
const observer = new ResizeObserver(entries => {
  const e = entries[0]; // should be only one
  console.log(e.contentRect.width);
})

// start listening for size changes
observer.observe(div);

.demo { /* not really relevant. just making it visible. */
  background: skyblue;
  min-height: 50px;
}

<button>Change Size</button>
<div class="demo">Demo</div>

Microsoft's Internet Explorer supports onresize on all HTML elements. In all other Browsers the onresize is only available on the window object. https://developer.mozilla/en-US/docs/Web/API/Window.onresize

If you want to have onresize on a div in all browsers check this:

http://marcj.github.io/css-element-queries/

This library has a class ResizeSensor which can be used for resize detection.