Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Jadikan Elemen HTML Boleh Diubah Saiz Hanya Menggunakan JavaScript Vanila?

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

Mary-Kate Olsenasal: 2024-12-08 07:51:15927semak imbas

How Can I Make HTML Elements Resizable Using Only Vanilla JavaScript?

Mencipta Elemen HTML Boleh Resizable Menggunakan JavaScript Vanila

Tugas untuk membuat elemen HTML, seperti

atau

tag, boleh diubah saiz apabila diklik boleh dicapai tanpa bergantung pada perpustakaan luaran seperti jQuery. Begini cara anda boleh melakukannya menggunakan JavaScript tulen:

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(document.defaultView.getComputedStyle(p).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.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.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}

Kod ini menambahkan kelas 'boleh diubah saiz' pada elemen sasaran dan menambahkan

dengan kelas 'resizer' kepada elemen. Apabila 'resizer' diklik, peristiwa seret dan lepas tetikus ditangkap untuk melaraskan lebar dan ketinggian elemen sasaran secara dinamik berdasarkan pergerakan tetikus.

Perlu diingat bahawa penyelesaian ini mungkin tidak serasi dengan semua pelayar. Untuk pelaksanaan yang lebih mantap, pertimbangkan untuk menggunakan pustaka JavaScript khusus untuk pensaiz semula elemen.

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

JavaScript jquery html for using class this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mengapa SVG Saya Mempunyai Ruang Tambahan Di Bawahnya dalam Div, dan Bagaimana Saya Boleh Membetulkannya?Artikel seterusnya：Mengapa SVG Saya Mempunyai Ruang Tambahan Di Bawahnya dalam Div, dan Bagaimana Saya Boleh Membetulkannya?

Artikel berkaitan

Lihat lagi