Bagaimanakah Saya Boleh Jadikan Elemen HTML Boleh Diubah Saiz Menggunakan Hanya JavaScript?

Saiz Semula Elemen HTML Boleh Disesuaikan Menggunakan JavaScript Tulen

Selalunya, pembangun web perlu menyediakan antara muka yang boleh diubah saiz untuk elemen HTML tanpa bergantung pada pihak ketiga perpustakaan. Artikel ini meneroka cara untuk mencapai fungsi ini menggunakan JavaScript tulen.

Untuk menjadikan elemen HTML boleh diubah saiz, kami boleh melampirkan pendengar acara untuk memantau input tetikus dan melaraskan saiz elemen dengan sewajarnya. Berikut ialah kod yang mencapai ini:

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

Penggunaan:

Hanya gunakan kod ini pada elemen HTML yang dikehendaki, seperti perenggan (

):

<p>Resizable Text</p>

Demo:

[Pautan Demo]

Nota:

Perlu diingat bahawa penyelesaian ini mungkin mempunyai isu keserasian merentas penyemak imbas; ia telah diuji dan berfungsi dalam Firefox tetapi bukan IE di bawah versi 9.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Jadikan Elemen HTML Boleh Diubah Saiz Menggunakan Hanya JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!