Wie kann man die Größe von HTML-Elementen mit reinem Javascript ändern?

Question 1

Ich habe mich gefragt, wie wir die Größe eines HTML-Elements <div>oder eines <p>Tag-Elements ändern können, wenn wir mit reinem JavaScript klicken, nicht mit der jQuery-Bibliothek oder einer anderen Bibliothek.

Question 2

Ich empfehle wirklich, eine Art Bibliothek zu verwenden, aber Sie haben danach gefragt, Sie bekommen es:

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

Demo

Denken Sie daran, dass dies möglicherweise nicht in allen Browsern ausgeführt wird (nur in Firefox getestet, funktioniert definitiv nicht in IE <9).

Question 3

Was ist mit einer reinen CSS3-Lösung?

div {
    resize: both;
    overflow: auto;
}

MDN-Webdokumente

Beispiel für W3Schools

Browser-Unterstützung

Question 4

Ist einfach:

Beispiel: 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

Siehe meinen browserübergreifenden Resizer .

    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>resizer</title>
        <meta name="author" content="Andrej Hristoliubov [email protected]">
        <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>

Erweitern Sie das Snippet

Siehe auch mein Beispiel für Resizer

Question 6

Ich habe gerade einen CodePen erstellt, der zeigt, wie dies mit ES6 ziemlich einfach gemacht werden kann.

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

Grundsätzlich ist hier die Klasse, die dies tut.

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

Ich habe eine Funktion erstellt, die eine ID eines HTML-Elements empfängt und auf der rechten Seite einen Rahmen hinzufügt. Die Funktion ist allgemein und empfängt nur eine ID, damit Sie sie so kopieren können, wie sie ist, und sie funktioniert

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>

Erweitern Sie das Snippet

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

Question 8

Es gibt hier sehr gute Beispiele, mit denen Sie beginnen können, aber alle basieren darauf, ein zusätzliches oder externes Element wie ein "div" als Referenzelement hinzuzufügen, um es zu ziehen und die neuen Dimensionen oder Positionen des ursprünglichen Elements zu berechnen.

Hier ist ein Beispiel, das keine zusätzlichen Elemente verwendet. Wir könnten Ränder, Auffüllungen oder Ränder hinzufügen, ohne die Funktionsweise zu beeinträchtigen. In diesem Beispiel haben wir weder Farbe noch einen visuellen Verweis auf die Ränder oder die untere rechte Ecke als Hinweis hinzugefügt, wo Sie die Abmessungen vergrößern oder verkleinern können. Mit dem Cursor um die veränderbaren Elemente werden die Hinweise angezeigt!

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

Sehen Sie es in Aktion mit CodeSandbox:

In diesem Beispiel verwenden wir ES6 und ein Modul, das eine Klasse namens Resizer exportiert. Ein Beispiel sagt mehr als tausend Worte:

Oder mit dem Code-Snippet:

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Question 9

nur mit dem `mousemove`Ereignis in Vanille js

Schritte

Fügen Sie das mousemoveIhrem Ziel hinzu
hören auf das moveZielereignis
Holen Sie sich die Zeigerposition, ändern Sie die Größe Ihres Ziels

Codes

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

Live-Demo

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

refs

https://developer.mozilla.org/en-US/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 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>

Erweitern Sie das Snippet

Answer 1

80

Ich habe mich gefragt, wie wir die Größe eines HTML-Elements <div>oder eines <p>Tag-Elements ändern können, wenn wir mit reinem JavaScript klicken, nicht mit der jQuery-Bibliothek oder einer anderen Bibliothek.

javascript html css dom-events Mönch
quelle

Was meinst du mit "Größenänderung"? Wenn Sie die Größe des Fensters ändern möchten, können Sie die Breite des Elements in% festlegen.

Sagar Patil

Hier ist, wie ich die Größe eines div-Elements ändere

sfanjoy

In hohem Maße

Andrew

Answer 2

Was meinst du mit "Größenänderung"? Wenn Sie die Größe des Fensters ändern möchten, können Sie die Breite des Elements in% festlegen.

Sagar Patil

Answer 3

Hier ist, wie ich die Größe eines div-Elements ändere

sfanjoy

Answer 4

In hohem Maße

Andrew

Answer 5

107

Ich empfehle wirklich, eine Art Bibliothek zu verwenden, aber Sie haben danach gefragt, Sie bekommen es:

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

Demo

Denken Sie daran, dass dies möglicherweise nicht in allen Browsern ausgeführt wird (nur in Firefox getestet, funktioniert definitiv nicht in IE <9).

user123444555621
quelle

eine Frage, was bewirkt dieser Wert von '10' im Code parseInt (document.defaultView.getComputedStyle (p) .width, 10);

Mönch

1

Ich habe einen Fehler im Skript gefunden. Wenn Sie versuchen, die Größe mehrerer p-Tag-Elemente zu ändern, wenn mehr als ein p-Tag-Element vorhanden ist, funktioniert der Code nicht. Gibt es eine Lösung dafür?

Mönch

1

Du wirst das nicht wirklich in der Produktion verwenden, oder? Der obige Code ist offensichtlich ein schneller Hack und weist mehrere andere Probleme auf. Es soll nur zeigen, wie die Dinge auf niedrigem Niveau funktionieren.

user123444555621

4

+1 Ich weiß, dass es auf niedriger Ebene ist, aber es ist sehr nützlich, wenn Sie aus irgendeinem Grund keine Bibliothek eines Drittanbieters verwenden können. Ich habe es auf Chrome, Firefox, Opera und Safari getestet.

Jan Vorcak

4

Ich habe die jsfiddle repariert. Dies sollte funktionieren und den gleichen Effekt erzielen. jsfiddle.net/MissoulaLorenzo/gfn6ob3j

Lorenzo Gangi

Answer 6

eine Frage, was bewirkt dieser Wert von '10' im Code parseInt (document.defaultView.getComputedStyle (p) .width, 10);

Mönch

Answer 7

1

Ich habe einen Fehler im Skript gefunden. Wenn Sie versuchen, die Größe mehrerer p-Tag-Elemente zu ändern, wenn mehr als ein p-Tag-Element vorhanden ist, funktioniert der Code nicht. Gibt es eine Lösung dafür?

Mönch

Answer 8

1

Du wirst das nicht wirklich in der Produktion verwenden, oder? Der obige Code ist offensichtlich ein schneller Hack und weist mehrere andere Probleme auf. Es soll nur zeigen, wie die Dinge auf niedrigem Niveau funktionieren.

user123444555621

Answer 9

4

+1 Ich weiß, dass es auf niedriger Ebene ist, aber es ist sehr nützlich, wenn Sie aus irgendeinem Grund keine Bibliothek eines Drittanbieters verwenden können. Ich habe es auf Chrome, Firefox, Opera und Safari getestet.

Jan Vorcak

Answer 10

4

Ich habe die jsfiddle repariert. Dies sollte funktionieren und den gleichen Effekt erzielen. jsfiddle.net/MissoulaLorenzo/gfn6ob3j

Lorenzo Gangi

Answer 11

77

Was ist mit einer reinen CSS3-Lösung?

div {
    resize: both;
    overflow: auto;
}

MDN-Webdokumente

Beispiel für W3Schools

Browser-Unterstützung

Alex
quelle

3

Leider wird die CSS-Größenänderung in IE

pyanzin

9

Ich denke, es ist wichtig zu erwähnen: Wenn Sie CSS- resizeWebkit-Browser verwenden, können Sie die Größe eines Elements nicht ändern, um es kleiner, sondern nur größer (in beiden Dimensionen) zu machen.

Rotareti

5

Ich habe es in Chrome 53 versucht und es funktioniert sowohl beim Schrumpfen als auch beim Dehnen.

DutchKevv

1

Das ist wirklich schön zu wissen. Aber ich brauche eine veränderbare Fußzeile, deren Größe sich nach oben ändert. Scheint mit "resize" nicht möglich zu sein.

Martin Meeser

Danke, das hat mich gerettet! Ich musste die Größe eines Iframes ändern und es funktioniert. Nichts in Javascript funktioniert für Iframes.

FourCinnamon0

Answer 12

3

Leider wird die CSS-Größenänderung in IE

pyanzin

Answer 13

9

Ich denke, es ist wichtig zu erwähnen: Wenn Sie CSS- resizeWebkit-Browser verwenden, können Sie die Größe eines Elements nicht ändern, um es kleiner, sondern nur größer (in beiden Dimensionen) zu machen.

Rotareti

Answer 14

5

Ich habe es in Chrome 53 versucht und es funktioniert sowohl beim Schrumpfen als auch beim Dehnen.

DutchKevv

Answer 15

1

Das ist wirklich schön zu wissen. Aber ich brauche eine veränderbare Fußzeile, deren Größe sich nach oben ändert. Scheint mit "resize" nicht möglich zu sein.

Martin Meeser

Answer 16

Danke, das hat mich gerettet! Ich musste die Größe eines Iframes ändern und es funktioniert. Nichts in Javascript funktioniert für Iframes.

FourCinnamon0

Answer 17

Ist einfach:

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

Answer 18

2

Tolle Lösung! Getestet und funktioniert für Firefox56, Chrome61, Opera48 und IE11.

JCO9

Answer 19

Das funktioniert super! Ich habe nach einem Ausgangspunkt gesucht, um dieses Problem anzugehen, und dies hat mir etwas gegeben, mit dem ich arbeiten kann.

Answer 20

Siehe meinen browserübergreifenden Resizer .

    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>resizer</title>
        <meta name="author" content="Andrej Hristoliubov [email protected]">
        <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>

Erweitern Sie das Snippet

Siehe auch mein Beispiel für Resizer

Answer 21

Es ist bemerkenswert, dass, wenn ich Ihr Beispiel in Firefox (unter Linux) versuche, die horizontale und vertikale Größenänderung dazu führt, dass der Text zwischen ausgewählt und nicht ausgewählt hin und her blinkt.

Andrew

Answer 22

Ich habe gerade einen CodePen erstellt, der zeigt, wie dies mit ES6 ziemlich einfach gemacht werden kann.

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

Grundsätzlich ist hier die Klasse, die dies tut.

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

Answer 23

"ziemlich leicht": lol - Auch das bricht für mich; Es scheint, dass es Probleme mit der Auswahl und Abwahl von Text gibt.

Andrew

Answer 24

Ich habe eine Funktion erstellt, die eine ID eines HTML-Elements empfängt und auf der rechten Seite einen Rahmen hinzufügt. Die Funktion ist allgemein und empfängt nur eine ID, damit Sie sie so kopieren können, wie sie ist, und sie funktioniert

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>

Erweitern Sie das Snippet

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

Answer 25

Es gibt hier sehr gute Beispiele, mit denen Sie beginnen können, aber alle basieren darauf, ein zusätzliches oder externes Element wie ein "div" als Referenzelement hinzuzufügen, um es zu ziehen und die neuen Dimensionen oder Positionen des ursprünglichen Elements zu berechnen.

Hier ist ein Beispiel, das keine zusätzlichen Elemente verwendet. Wir könnten Ränder, Auffüllungen oder Ränder hinzufügen, ohne die Funktionsweise zu beeinträchtigen. In diesem Beispiel haben wir weder Farbe noch einen visuellen Verweis auf die Ränder oder die untere rechte Ecke als Hinweis hinzugefügt, wo Sie die Abmessungen vergrößern oder verkleinern können. Mit dem Cursor um die veränderbaren Elemente werden die Hinweise angezeigt!

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

Sehen Sie es in Aktion mit CodeSandbox:

In diesem Beispiel verwenden wir ES6 und ein Modul, das eine Klasse namens Resizer exportiert. Ein Beispiel sagt mehr als tausend Worte:

Oder mit dem Code-Snippet:

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Answer 26

nur mit dem `mousemove`Ereignis in Vanille js

Schritte

Fügen Sie das mousemoveIhrem Ziel hinzu
hören auf das moveZielereignis
Holen Sie sich die Zeigerposition, ändern Sie die Größe Ihres Ziels

Codes

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

Live-Demo

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

refs

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event

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

Answer 27

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>

Erweitern Sie das Snippet

Wie kann man die Größe von HTML-Elementen mit reinem Javascript ändern?

Antworten:

nur mit dem mousemoveEreignis in Vanille js

Schritte

Codes

Live-Demo

refs

nur mit dem `mousemove`Ereignis in Vanille js