Comment puis-je rendre des éléments HTML redimensionnables en utilisant uniquement JavaScript ?-tutoriel CSS-php.cn

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

Patricia Arquette

Libérer： 2024-12-07 15:30:15

original

421 Les gens l'ont consulté

How Can I Make HTML Elements Resizable Using Only 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);
}

Copier après la connexion

Utilisation :

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

) :

<p>Resizable Text</p>

Copier après la connexion

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!