Bagaimanakah Saya Boleh Mencipta Elemen HTML Boleh Diubah Dengan Hanya Menggunakan JavaScript Tulen?

Mencipta Elemen HTML Boleh Resizable dengan JavaScript Tulen

Masalah:

Bagaimana kita boleh membuat HTML elemen seperti

atau

boleh diubah saiz apabila mengklik, hanya menggunakan JavaScript tulen?

Penyelesaian:

Untuk menjadikan elemen HTML boleh diubah saiz, kami boleh mencipta penyusun semula tersuai yang memanipulasi saiznya:

// Element to make resizable
var p = document.querySelector('p');

// Initialize resizing on click
p.addEventListener('click', function() {

    // Remove click event listener and append resizer
    p.removeEventListener('click', init, false);
    p.className += ' resizable';

    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);

    // Attach mouse event listeners for resizing
    resizer.addEventListener('mousedown', initDrag, false);
});

Mengubah saiz Kefungsian:

Kami menjejaki pergerakan tetikus dan melaraskan saiz elemen:

// Store initial values and mouse coordinates
var startX, startY, startWidth, startHeight;

function initDrag(e) {
    startX = e.clientX;
    startY = e.clientY;
    startWidth = parseInt(window.getComputedStyle(p).width, 10);
    startHeight = parseInt(window.getComputedStyle(p).height, 10);
    
    // Listen for mouse movement and update element's dimensions
    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) {
    // Remove mouse event listeners
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}

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

JavaScript html using

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