Detecting an element is being resized with Javascript

Question

With CSS' resize rule, one can allow an element to be resized like so:

.someClass {
  resize: vertical/horizontal/both
}

However, I'm unable to find a way to detect an element is being resized.

HTML' Drag and Drop API has built-in events to detect dragging which are documented here.

Is there a similar way I can detect when an element is being dragged, or make my own version?

@yousoumar This might help with some of the more complicated things I want to do. I'm surprised it wasn't one of the suggested similar questions when I was creating the question/post. — Nivyan, Jul 28 '22 at 09:07

score 2 · Accepted Answer · edited Jul 28 '22 at 12:24

You need to get the element by a selector. For example:

const element = document.querySelector('.someClass');

And then you can use resizeObserver:

const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
     console.log(entry)
  }
  console.log('Size changed');
  
});

resizeObserver.observe(element);

For more resources: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

Detecting an element is being resized with Javascript

1 Answers1