如何仅使用 Vanilla JavaScript 来调整 HTML 元素的大小？

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

制作 HTML 元素的任务，例如

或

标签，单击时可调整大小，无需依赖 jQuery 等外部库即可实现。以下是使用纯 JavaScript 实现此目的的方法：

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

此代码向目标元素添加一个“可调整大小”类，并附加一个额外的

。元素带有“resizer”类。单击“resizer”时，会捕获鼠标拖放事件，以根据鼠标移动动态调整目标元素的宽度和高度。

请记住，此解决方案可能与所有浏览器。为了获得更强大的实现，请考虑使用专用于元素调整大小的 JavaScript 库。

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