Comment puis-je rendre des éléments HTML redimensionnables en utilisant uniquement JavaScript ?

Redimensionnement d'éléments HTML personnalisable à l'aide de JavaScript pur

Souvent, les développeurs Web doivent fournir une interface redimensionnable pour les éléments HTML sans faire appel à des tiers. bibliothèques. Cet article explique comment obtenir cette fonctionnalité en utilisant du JavaScript pur.

Pour rendre un élément HTML redimensionnable, nous pouvons attacher des écouteurs d'événements pour surveiller les entrées de la souris et ajuster la taille de l'élément en conséquence. Voici le code qui accomplit cela :

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);
}

Utilisation :

Appliquez simplement ce code à l'élément HTML souhaité, tel qu'un paragraphe (

) :

<p>Resizable Text</p>

Démo :

[Lien démo]

Remarque :

Gardez à l'esprit que cette solution peut présenter des problèmes de compatibilité entre les navigateurs ; il a été testé et fonctionne dans Firefox mais pas dans IE en dessous de la version 9.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!