Wie kann ich die Größe von HTML-Elementen nur mit JavaScript ändern?

Anpassbare Größenänderung von HTML-Elementen mit reinem JavaScript

Webentwickler müssen häufig eine skalierbare Schnittstelle für HTML-Elemente bereitstellen, ohne sich auf Drittanbieter verlassen zu müssen Bibliotheken. In diesem Artikel wird untersucht, wie diese Funktionalität mit reinem JavaScript erreicht wird.

Um die Größe eines HTML-Elements zu ändern, können wir Ereignis-Listener anhängen, um Mauseingaben zu überwachen und die Größe des Elements entsprechend anzupassen. Hier ist der Code, der dies erreicht:

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

Verwendung:

Wenden Sie diesen Code einfach auf das gewünschte HTML-Element an, z. B. einen Absatz (

):

<p>Resizable Text</p>

Demo:

[Demo-Link]

Hinweis:

Beachten Sie, dass es bei dieser Lösung zu Kompatibilitätsproblemen zwischen verschiedenen Browsern kommen kann. Es wurde getestet und funktioniert in Firefox, jedoch nicht in IE unter Version 9.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe von HTML-Elementen nur mit JavaScript ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!