如何僅使用純 JavaScript 建立可調整大小的 HTML 元素？

使用純JavaScript 建立可調整大小的HTML 元素

問題：

問題：

問題：

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

問題：

我們如何製作HTML諸如

之類的元素或

僅使用純JavaScript 即可在單擊時調整大小？

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

解決方案：要讓 HTML 元素調整大小，我們可以建立一個自訂調整器來操縱其大小： 調整大小功能：我們追蹤老鼠移動並調整元素的大小：

以上是如何僅使用純 JavaScript 建立可調整大小的 HTML 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！