我想知道如何使用纯JavaScript(而不是jQuery库或任何其他库)单击时使HTML元素<div>或<p>tag元素可调整大小。
<div>
<p>
我真的建议使用某种类型的库,但是您要求它,可以得到:
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中运行)。