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

使用纯 JavaScript 自定义 HTML 元素大小调整

通常，Web 开发人员需要为 HTML 元素提供可调整大小的界面，而不依赖第三方图书馆。本文探讨了如何使用纯 JavaScript 来实现此功能。

要使 HTML 元素可调整大小，我们可以附加事件侦听器来监视鼠标输入并相应地调整元素的大小。下面是完成此操作的代码：

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(window.getComputedStyle(p).width);
  startHeight = parseInt(window.getComputedStyle(p).height);
  document.addEventListener('mousemove', doDrag, false);
  document.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.removeEventListener('mousemove', doDrag, false);
  document.removeEventListener('mouseup', stopDrag, false);
}

用法：

只需将此代码应用于所需的 HTML 元素，例如段落(

):

<p>Resizable Text</p>

演示：

[演示链接]

注意：

请记住，此解决方案可能存在跨浏览器的兼容性问题；它已经过测试并且可以在 Firefox 中运行，但不能在版本 9 以下的 IE 中运行。

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