如何仅使用纯 JavaScript 创建可调整大小的 HTML 元素？

使用纯 JavaScript 创建可调整大小的 HTML 元素

问题：

我们如何制作 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);
});

调整大小功能：

我们跟踪鼠标移动并调整元素的大小：

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

以上是如何仅使用纯 JavaScript 创建可调整大小的 HTML 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！