如何使用纯Javascript调整HTML元素的大小？

Question 1

我想知道如何使用纯JavaScript（而不是jQuery库或任何其他库）单击时使HTML元素<div>或<p>tag元素可调整大小。

Question 2

我真的建议使用某种类型的库，但是您要求它，可以得到：

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中运行）。

Question 3

纯CSS3解决方案呢？

div {
    resize: both;
    overflow: auto;
}

MDN网络文档

W3Schools示例

浏览器支持

Question 4

很简单：

示例：https：//jsfiddle.net/RainStudios/mw786v1w/

var element = document.getElementById('element');
//create box in bottom-left
var resizer = document.createElement('div');
resizer.style.width = '10px';
resizer.style.height = '10px';
resizer.style.background = 'red';
resizer.style.position = 'absolute';
resizer.style.right = 0;
resizer.style.bottom = 0;
resizer.style.cursor = 'se-resize';
//Append Child to Element
element.appendChild(resizer);
//box function onmousemove
resizer.addEventListener('mousedown', initResize, false);

//Window funtion mousemove & mouseup
function initResize(e) {
   window.addEventListener('mousemove', Resize, false);
   window.addEventListener('mouseup', stopResize, false);
}
//resize the element
function Resize(e) {
   element.style.width = (e.clientX - element.offsetLeft) + 'px';
   element.style.height = (e.clientY - element.offsetTop) + 'px';
}
//on mouseup remove windows functions mousemove & mouseup
function stopResize(e) {
    window.removeEventListener('mousemove', Resize, false);
    window.removeEventListener('mouseup', stopResize, false);
}

Question 5

请参阅我与跨浏览器兼容的调整大小。

    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>resizer</title>
        <meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="https://rawgit.com/anhr/resizer/master/Common.js"></script>
        <script type="text/javascript" src="https://rawgit.com/anhr/resizer/master/resizer.js"></script>
        <style>
            .element {
                border: 1px solid #999999;
                border-radius: 4px;
                margin: 5px;
                padding: 5px;
            }
        </style>
        <script type="text/javascript">
            function onresize() {
                var element1 = document.getElementById("element1");
                var element2 = document.getElementById("element2");
                var element3 = document.getElementById("element3");
                var ResizerY = document.getElementById("resizerY");
                ResizerY.style.top = element3.offsetTop - 15 + "px";
                var topElements = document.getElementById("topElements");
                topElements.style.height = ResizerY.offsetTop - 20 + "px";
                var height = topElements.clientHeight - 32;
                if (height < 0)
                    height = 0;
                height += 'px';
                element1.style.height = height;
                element2.style.height = height;
            }
            function resizeX(x) {
                //consoleLog("mousemove(X = " + e.pageX + ")");
                var element2 = document.getElementById("element2");
                element2.style.width =
                    element2.parentElement.clientWidth
                    + document.getElementById('rezizeArea').offsetLeft
                    - x
                    + 'px';
            }
            function resizeY(y) {
                //consoleLog("mousemove(Y = " + e.pageY + ")");
                var element3 = document.getElementById("element3");
                var height =
                    element3.parentElement.clientHeight
                    + document.getElementById('rezizeArea').offsetTop
                    - y
                ;
                //consoleLog("mousemove(Y = " + e.pageY + ") height = " + height + " element3.parentElement.clientHeight = " + element3.parentElement.clientHeight);
                if ((height + 100) > element3.parentElement.clientHeight)
                    return;//Limit of the height of the elemtnt 3
                element3.style.height = height + 'px';
                onresize();
            }
            var emailSubject = "Resizer example error";
        </script>
    </head>
    <body>
        <div id='Message'></div>
        <h1>Resizer</h1>
        <p>Please see example of resizing of the HTML element by mouse dragging.</p>
        <ul>
            <li>Drag the red rectangle if you want to change the width of the Element 1 and Element 2</li>
            <li>Drag the green rectangle if you want to change the height of the Element 1 Element 2 and Element 3</li>
            <li>Drag the small blue square at the left bottom of the Element 2, if you want to resize of the Element 1 Element 2 and Element 3</li>
        </ul>
        <div id="rezizeArea" style="width:1000px; height:250px; overflow:auto; position: relative;" class="element">
            <div id="topElements" class="element" style="overflow:auto; position:absolute; left: 0; top: 0; right:0;">
                <div id="element2" class="element" style="width: 30%; height:10px; float: right; position: relative;">
                    Element 2
                    <div id="resizerXY" style="width: 10px; height: 10px; background: blue; position:absolute; left: 0; bottom: 0;"></div>
                    <script type="text/javascript">
                        resizerXY("resizerXY", function (e) {
                                resizeX(e.pageX + 10);
                                resizeY(e.pageY + 50);
                            });
                    </script>
                </div>
                <div id="resizerX" style="width: 10px; height:100%; background: red; float: right;"></div>
                <script type="text/javascript">
                    resizerX("resizerX", function (e) {
                        resizeX(e.pageX + 25);
                    });
                </script>
                <div id="element1" class="element" style="height:10px; overflow:auto;">Element 1</div>
            </div>
            <div id="resizerY" style="height:10px; position:absolute; left: 0; right:0; background: green;"></div>
            <script type="text/javascript">
                resizerY("resizerY", function (e) {
                    resizeY(e.pageY + 25);
                });
            </script>
            <div id="element3" class="element" style="height:100px; position:absolute; left: 0; bottom: 0; right:0;">Element 3</div>
        </div>
        <script type="text/javascript">
            onresize();
        </script>
    </body>
    </html>

展开摘要

另请参阅我的大小调整器示例

Question 6

我刚刚创建了一个CodePen，展示了如何使用ES6轻松完成此操作。

http://codepen.io/travist/pen/GWRBQV

基本上，这是执行此操作的类。

let getPropertyValue = function(style, prop) {
  let value = style.getPropertyValue(prop);
  value = value ? value.replace(/[^0-9.]/g, '') : '0';
  return parseFloat(value);
}

let getElementRect = function(element) {
  let style = window.getComputedStyle(element, null);
  return {
    x: getPropertyValue(style, 'left'),
    y: getPropertyValue(style, 'top'),
    width: getPropertyValue(style, 'width'),
    height: getPropertyValue(style, 'height')
  }
}

class Resizer {
    constructor(wrapper, element, options) {
        this.wrapper = wrapper;
        this.element = element;
        this.options = options;
        this.offsetX = 0;
        this.offsetY = 0;
        this.handle = document.createElement('div');
        this.handle.setAttribute('class', 'drag-resize-handlers');
        this.handle.setAttribute('data-direction', 'br');
        this.wrapper.appendChild(this.handle);
        this.wrapper.style.top = this.element.style.top;
        this.wrapper.style.left = this.element.style.left;
        this.wrapper.style.width = this.element.style.width;
        this.wrapper.style.height = this.element.style.height;
        this.element.style.position = 'relative';
        this.element.style.top = 0;
        this.element.style.left = 0;
        this.onResize = this.resizeHandler.bind(this);
        this.onStop = this.stopResize.bind(this);
        this.handle.addEventListener('mousedown', this.initResize.bind(this));
    }

    initResize(event) {
        this.stopResize(event, true);
        this.handle.addEventListener('mousemove', this.onResize);
        this.handle.addEventListener('mouseup', this.onStop);
    }

    resizeHandler(event) {
        this.offsetX = event.clientX - (this.wrapper.offsetLeft + this.handle.offsetLeft);
        this.offsetY = event.clientY - (this.wrapper.offsetTop + this.handle.offsetTop);
        let wrapperRect = getElementRect(this.wrapper);
        let elementRect = getElementRect(this.element);
        this.wrapper.style.width = (wrapperRect.width + this.offsetX) + 'px';
        this.wrapper.style.height = (wrapperRect.height + this.offsetY) + 'px';
        this.element.style.width = (elementRect.width + this.offsetX) + 'px';
        this.element.style.height = (elementRect.height + this.offsetY) + 'px';
    }

    stopResize(event, nocb) {
        this.handle.removeEventListener('mousemove', this.onResize); 
        this.handle.removeEventListener('mouseup', this.onStop);
    }
}

class Dragger {
    constructor(wrapper, element, options) {
        this.wrapper = wrapper;
        this.options = options;
        this.element = element;
        this.element.draggable = true;
        this.element.setAttribute('draggable', true);
        this.element.addEventListener('dragstart', this.dragStart.bind(this));
    }

    dragStart(event) {
        let wrapperRect = getElementRect(this.wrapper);
        var x = wrapperRect.x - parseFloat(event.clientX);
        var y = wrapperRect.y - parseFloat(event.clientY);
        event.dataTransfer.setData("text/plain", this.element.id + ',' + x + ',' + y);
    }

    dragStop(event, prevX, prevY) {
        var posX = parseFloat(event.clientX) + prevX;
        var posY = parseFloat(event.clientY) + prevY;
        this.wrapper.style.left = posX + 'px';
        this.wrapper.style.top = posY + 'px';
    }
}

class DragResize {
    constructor(element, options) {
        options = options || {};
        this.wrapper = document.createElement('div');
        this.wrapper.setAttribute('class', 'tooltip drag-resize');
        if (element.parentNode) {
          element.parentNode.insertBefore(this.wrapper, element);
        }
        this.wrapper.appendChild(element);
        element.resizer = new Resizer(this.wrapper, element, options);
        element.dragger = new Dragger(this.wrapper, element, options);
    }
}

document.body.addEventListener('dragover', function (event) {
    event.preventDefault();
    return false;
});

document.body.addEventListener('drop', function (event) {
    event.preventDefault();
    var dropData = event.dataTransfer.getData("text/plain").split(',');
    var element = document.getElementById(dropData[0]);
    element.dragger.dragStop(event, parseFloat(dropData[1]), parseFloat(dropData[2]));
    return false;
});

Question 7

我创建了一个函数，该函数可以接收html元素的ID，并在其右侧添加边框，该函数是常规函数，仅接收一个ID，因此您可以按原样复制它，并且可以正常工作

var myoffset;
function resizeE(elem){
    var borderDiv = document.createElement("div");
    borderDiv.className = "border";
    borderDiv.addEventListener("mousedown",myresize = function myrsize(e) {
	    myoffset = e.clientX - (document.getElementById(elem).offsetLeft + parseInt(window.getComputedStyle(document.getElementById(elem)).getPropertyValue("width")));
	    window.addEventListener("mouseup",mouseUp);
	    document.addEventListener("mousemove",mouseMove = function mousMove(e) {
	   	 document.getElementById(elem).style.width = `${e.clientX -  myoffset - document.getElementById(elem).offsetLeft}px`;
		});
	});
    document.getElementById(elem).appendChild(borderDiv);
}

function mouseUp() {
    document.removeEventListener("mousemove", mouseMove);
    window.removeEventListener("mouseup",mouseUp);
}

function load() 
{
	resizeE("resizeableDiv");
	resizeE("anotherresizeableDiv");
  resizeE("anotherresizeableDiv1");
}

.border {

  position: absolute;
  cursor: e-resize;
  width: 9px;
  right: -5px;
  top: 0;
  height: 100%;
}

#resizeableDiv {
  width: 30vw;
  height: 30vh;
  background-color: #84f4c6;
  position: relative;
}
#anotherresizeableDiv {
  width: 30vw;
  height: 30vh;
  background-color: #9394f4;
  position: relative;
}
#anotherresizeableDiv1 {
  width: 30vw;
  height: 30vh;
  background-color: #43f4f4;
  position: relative;
}
#anotherresizeableDiv1 .border{
  background-color: black;
}
#anotherresizeableDiv .border{
  width: 30px;
  right: -200px;
  background-color: green;
}

<body onload="load()">

  <div id="resizeableDiv">change my size with the east border</div>
  <div id="anotherresizeableDiv1">with visible border</div>
</body>
  <div id="anotherresizeableDiv">with editted outside border</div>
</body>

展开摘要

resizeE("resizeableDiv"); //this calls a function that does the magic to the id inserted

Question 8

只是`mousemove`在香草js中使用事件

脚步

将添加mousemove到您的目标
听目标move事件
获取指针位置，调整目标大小

码

    const div = document.querySelector(`div.before`);
    const box = document.querySelector(`div.container`);
    box.addEventListener(`mousemove`, (e) => {
      const {
        offsetX,
        offsetY,
      } = e;
      div.style.width = offsetX + `px`;
    });

现场演示

https://codepen.io/xgqfrms/full/wvMQqZL

裁判

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousemove_event

https://medium.com/the-z/making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d

Question 9

这里有很多很好的例子可以开始尝试，但是所有例子都是基于添加一些额外的或外部元素（例如“ div”）作为参考元素来拖动它，并计算原始元素的新尺寸或位置。

这是一个不使用任何额外元素的示例。我们可以添加边框，填充或边距而不影响其操作。在此示例中，我们没有添加颜色，也没有对边框或右下角的任何可视化引用作为可以放大或缩小尺寸的线索，但是可以使用可调整大小元素周围的光标来显示线索！

let resizerForCenter = new Resizer('center')  
resizerForCenter.initResizer()

通过CodeSandbox进行实际操作：

在此示例中，我们使用ES6和一个导出名为Resizer的类的模块。一个例子值一千个单词：

或使用代码段：

显示代码段

const html = document.querySelector('html')

class Resizer {
	constructor(elemId) {
		this._elem = document.getElementById(elemId)
		/**
		 * Stored binded context handlers for method passed to eventListeners!
		 * 
		 * See: /programming/9720927/removing-event-listeners-as-class-prototype-functions
		 */
		this._checkBorderHandler	= this._checkBorder.bind(this)
		this._doResizeHandler		= this._doResize.bind(this)
		this._initResizerHandler	= this.initResizer.bind(this)
		this._onResizeHandler		= this._onResize.bind(this)
	}

	initResizer() {
		this.stopResizer()
		this._beginResizer()
	}

	_beginResizer() {
		this._elem.addEventListener('mousemove', this._checkBorderHandler, false)
	}

	stopResizer() {
		html.style.cursor	= 'default'
		this._elem.style.cursor = 'default'
		
		window.removeEventListener('mousemove', this._doResizeHandler, false)
		window.removeEventListener('mouseup', this._initResizerHandler, false)

		this._elem.removeEventListener('mousedown', this._onResizeHandler, false)
		this._elem.removeEventListener('mousemove', this._checkBorderHandler, false)
	}

	_doResize(e) {
		let elem = this._elem

		let boxSizing = getComputedStyle(elem).boxSizing
		let borderRight = 0
		let borderLeft = 0
		let borderTop = 0
		let borderBottom = 0

		let paddingRight = 0
		let paddingLeft = 0
		let paddingTop = 0
		let paddingBottom = 0

		switch (boxSizing) {
			case 'content-box':
					paddingRight = parseInt(getComputedStyle(elem).paddingRight)
					paddingLeft = parseInt(getComputedStyle(elem).paddingLeft)
					paddingTop = parseInt(getComputedStyle(elem).paddingTop)
					paddingBottom = parseInt(getComputedStyle(elem).paddingBottom)
				break
			case 'border-box':
					borderRight = parseInt(getComputedStyle(elem).borderRight)
					borderLeft = parseInt(getComputedStyle(elem).borderLeft)
					borderTop = parseInt(getComputedStyle(elem).borderTop)
					borderBottom = parseInt(getComputedStyle(elem).borderBottom)
				break
			default: break
		}

		let horizontalAdjustment	= (paddingRight + paddingLeft) - (borderRight + borderLeft)
		let verticalAdjustment		= (paddingTop + paddingBottom) - (borderTop + borderBottom)

		let newWidth	= elem.clientWidth  + e.movementX - horizontalAdjustment + 'px'
		let newHeight	= elem.clientHeight + e.movementY - verticalAdjustment   + 'px'
		
		let cursorType = getComputedStyle(elem).cursor
		switch (cursorType) {
			case 'all-scroll':
					elem.style.width = newWidth
					elem.style.height = newHeight
				break
			case 'col-resize':
					elem.style.width = newWidth
				break
			case 'row-resize':
					elem.style.height = newHeight
				break
			default: break
		}
	}

	_onResize(e) {
		// On resizing state!
		let elem = e.target
		let newCursorType = undefined
		let cursorType = getComputedStyle(elem).cursor
		switch (cursorType) {
			case 'nwse-resize':
				newCursorType = 'all-scroll'
				break
			case 'ew-resize':
				newCursorType = 'col-resize'
				break
			case 'ns-resize':
				newCursorType = 'row-resize'
				break
			default: break
		}
		
		html.style.cursor	= newCursorType // Avoid cursor's flickering 
		elem.style.cursor	= newCursorType
		
		// Remove what is not necessary, and could have side effects!
		elem.removeEventListener('mousemove', this._checkBorderHandler, false);
		
		// Events on resizing state
		/**
		 * We do not apply the mousemove event on the elem to resize it, but to the window to prevent the mousemove from slippe out of the elem to resize. This work bc we calculate things based on the mouse position
		 */
		window.addEventListener('mousemove', this._doResizeHandler, false);
		window.addEventListener('mouseup', this._initResizerHandler, false);
	}

	_checkBorder(e) {
		const elem = e.target
		const borderSensitivity = 5
		const coor = getCoordenatesCursor(e)
		const onRightBorder		= ((coor.x + borderSensitivity) > elem.scrollWidth)
		const onBottomBorder	= ((coor.y + borderSensitivity) > elem.scrollHeight)
		const onBottomRightCorner = (onRightBorder && onBottomBorder)
		
		if (onBottomRightCorner) {
			elem.style.cursor = 'nwse-resize'
		} else if (onRightBorder) {
			elem.style.cursor = 'ew-resize'
		} else if (onBottomBorder) {
			elem.style.cursor = 'ns-resize'
		} else {
			elem.style.cursor = 'auto'
		}
		
		if (onRightBorder || onBottomBorder) {
			elem.addEventListener('mousedown', this._onResizeHandler, false)
		} else {
			elem.removeEventListener('mousedown', this._onResizeHandler, false)
		}
	}
}

function getCoordenatesCursor(e) {
	let elem = e.target;
	
	// Get the Viewport-relative coordinates of cursor.
	let viewportX = e.clientX
	let viewportY = e.clientY
	
	// Viewport-relative position of the target element.
	let elemRectangle = elem.getBoundingClientRect()
	
	// The  function returns the largest integer less than or equal to a given number.
	let x = Math.floor(viewportX - elemRectangle.left) // - elem.scrollWidth
	let y = Math.floor(viewportY - elemRectangle.top) // - elem.scrollHeight
	
	return {x, y}
}

let resizerForCenter = new Resizer('center')
resizerForCenter.initResizer()

let resizerForLeft = new Resizer('left')
resizerForLeft.initResizer()

setTimeout(handler, 10000, true); // 10s

function handler() {
  resizerForCenter.stopResizer()
}

body {
	background-color: white;
}

#wrapper div {
	/* box-sizing: border-box; */
	position: relative;
	float:left;
	overflow: hidden;
	height: 50px;
	width: 50px;
	padding: 3px;
}

#left {
	background-color: blueviolet;
}
#center {
	background-color:lawngreen ;
}
#right {
	background: blueviolet;
}
#wrapper {
	border: 5px solid hotpink;
	display: inline-block;
	
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Resizer v0.0.1</title>
</head>
  <body>
    <div id="wrapper">
      <div id="left">Left</div>
      <div id="center">Center</div>
      <div id="right">Right</div>
    </div>
  </body>
</html>

展开摘要

Question 10

var resizeHandle = document.getElementById('resizable');
var box = document.getElementById('resize');
resizeHandle.addEventListener('mousedown', initialiseResize, false);

function initialiseResize(e) {
  window.addEventListener('mousemove', startResizing, false);
  window.addEventListener('mouseup', stopResizing, false);
}

function stopResizing(e) {
  window.removeEventListener('mousemove', startResizing, false);
  window.removeEventListener('mouseup', stopResizing, false);
}

function startResizing(e) {
  box.style.width = (e.clientX) + 'px';
  box.style.height = (e.clientY) + 'px';
}

function startResizing(e) {
  box.style.width = (e.clientX - box.offsetLeft) + 'px';
  box.style.height = (e.clientY - box.offsetTop) + 'px';
}

#resize {
  position: relative;
  width: 130px;
  height: 130px;
  border: 2px solid blue;
  color: white;
}

#resizable {
  background-color: white;
  width: 10px;
  height: 10px;
  cursor: se-resize;
  position: absolute;
  right: 0;
  bottom: 0;
}

<div id="resize">

  <div id="resizable">
  </div>

展开摘要

如何使用纯Javascript调整HTML元素的大小？

只是mousemove在香草js中使用事件

脚步

码

现场演示

裁判

只是`mousemove`在香草js中使用事件