How to detect when the div element width change (not window resize) in JS?

Issue

I have a scenario, if div element width changes, i need to perform some functionality. So is there any way to detect that element width changes (not window resize).

for Example,
I have a DIV element with the width 300px and my window is 800px while rendering the page. When i trigger a function, i changed the div element width to 400px, so for that default width change i need to perform some actions, so is there any way to detect in pure javascript for the element size change ?

Solution

You can use a MutationObserver. Consider the following example that will let you know when the <p> tag is resized manually or when you click the “Resize” button. Any attribute mutation will trigger the observer so you will need to filter by what you want.

const p = document.querySelector("p");
const button = document.querySelector("button");

const p$ = new MutationObserver((mutationList, observer) => {
  for (mutation of mutationList) {
    console.log(mutation);
  }
});

p$.observe(p, {
  attributes: true,
  childList: false,
  subtree: false
});

button.addEventListener("click", () => {
  p.style.width = "100px";
});
.wrapper {
  width: 400px;
}

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}
<div class="wrapper">
  <p class="resizable">Hello</p>
  <button>Resize</button>
</div>

Answered By – zero298

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.