html调字段大小p,如何使用纯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(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);

}

请记住，这可能无法在所有浏览器中运行(仅在Firefox中经过测试，绝对不能在IE <9中运行)。

2020-05-10