Bagaimanakah Saya Boleh Mencipta Elemen HTML Boleh Diubah Dengan Hanya Menggunakan JavaScript Tulen?-tutorial css-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-12-10 18:59:16

asal

935 orang telah melayarinya

How Can I Create Resizable HTML Elements Using Only Pure JavaScript?

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

Salin selepas log masuk

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

Salin selepas log masuk

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!