How Can I Make HTML Elements Resizable Using Only JavaScript?

Customizable HTML Element Resizing Using Pure JavaScript

Often, web developers need to provide a resizable interface for HTML elements without relying on third-party libraries. This article explores how to achieve this functionality using pure JavaScript.

To make an HTML element resizable, we can attach event listeners to monitor mouse input and adjust the element's size accordingly. Here's the code that accomplishes this:

var p = document.querySelector('p'); // Element to make resizable

p.addEventListener('click', function init() {
  p.removeEventListener('click', init, false);
  p.className = p.className + ' resizable';
  var resizer = document.createElement('div');
  resizer.className = 'resizer';
  p.appendChild(resizer);
  resizer.addEventListener('mousedown', initDrag, false);
}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {
  startX = e.clientX;
  startY = e.clientY;
  startWidth = parseInt(window.getComputedStyle(p).width);
  startHeight = parseInt(window.getComputedStyle(p).height);
  document.addEventListener('mousemove', doDrag, false);
  document.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
  p.style.width = startWidth + e.clientX - startX + 'px';
  p.style.height = startHeight + e.clientY - startY + 'px';
}

function stopDrag(e) {
  document.removeEventListener('mousemove', doDrag, false);
  document.removeEventListener('mouseup', stopDrag, false);
}

Usage:

Simply apply this code to the desired HTML element, such as a paragraph (

):

<p>Resizable Text</p>

Demo:

[Demo Link]

Note:

Keep in mind that this solution may have compatibility issues across browsers; it has been tested and works in Firefox but not IE below version 9.

The above is the detailed content of How Can I Make HTML Elements Resizable Using Only JavaScript?. For more information, please follow other related articles on the PHP Chinese website!