使用普通javascript缩放HTML元素。我想使用普通javascript缩放HTML主体中的元素，但找不到解决方案。
function scaleBlock() {
const container = document.getElementById('container');
var mouseDownNow = false;
function scaleBlockOnMouseMove(element) {
elementDraggableHeight = element.target.getBoundingClientRect().bottom; // element height
elementDraggableWidth = element.target.getBoundingClientRect().right; // element width
mouseVerticalPosition = element.clientY; // mouse vertical position (Y-axis)
mouseHorizontalPosition = element.clientX; // mouse horizintal position (X-axis)
if (element.target.className == 'container' && (elementDraggableHeight - 15 < mouseVerticalPosition &&
mouseVerticalPosition <= elementDraggableHeight)) {
element.target.style.cursor = 'ns-resize';
container.style.height = (mouseVerticalPosition - (element.target.offsetTop - 10)) + 'px';
} else if (element.target.className == 'container' && (elementDraggableWidth - 15 < mouseHorizontalPosition &&
mouseHorizontalPosition <= elementDraggableWidth)) {
element.target.style.cursor = 'ew-resize';
container.style.width = (mouseHorizontalPosition - (element.target.offsetLeft - 10)) + 'px';
} else {
element.target.style.cursor = 'default';
}
}
(function onListeners() { // IIFE
container.onmousedown = (event) => {
mouseDownNow = true;
container.addEventListener('mousemove', scaleBlockOnMouseMove);
}
container.onmousemove = (element) => {
if (element.target.className == 'container' && (element.target.getBoundingClientRect().bottom - 15 < element.clientY &&
element.clientY <= element.target.getBoundingClientRect().bottom)) {
element.target.style.cursor = 'ns-resize';
} else if (element.target.className == 'container' && (element.target.getBoundingClientRect().right - 15 < element.clientX &&
element.clientX <= element.target.getBoundingClientRect().right)) {
element.target.style.cursor = 'ew-resize';
} else {
element.target.style.cursor = 'default';
}
}
window.onmouseup = (event) => {
if(mouseDownNow) {
container.removeEventListener('mousemove', scaleBlockOnMouseMove);
event.target.style.cursor = 'default';
}
}
})();
}
scaleBlock();html, body {
font-family: arial
}
.wrapper {
padding: 25px;
display: inline-block;
background-color: red;
margin: 50px auto;
height: auto;
width: auto;
}
.container {
width: 400px;
height: 300px;
background-color: #000000;
margin: 50px auto;
border-radius: 1px;
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Page Title</title>
</head>
<body>
<div class="container" id="container"> </div>
</body>
</html>