How to make HTML elements resizable using pure JavaScript?

Spread the love

To make HTML elements resizable using pure JavaScript, we add the mousemove event listener.

For instance, we write

const div = document.querySelector(`div.before`);
const box = document.querySelector(`div.container`);
box.addEventListener(`mousemove`, (e) => {
  const { offsetX, offsetY } = e;
  div.style.width = offsetX + `px`;
});

to select the divs with querySelector.

And we add a mousemove event listener for the box div with addEventListener.

In the event listener, we set the width of the div to the offsetX value to change the width when we move the mouse.

Leave a Reply

Your email address will not be published. Required fields are marked *