https://blog.csdn.net/bettergg/article/details/89206568
<!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>Document</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
#box {
width: 600px;
height: 500px;
overflow: hidden;
}
#left {
width: calc(30% - 5px);
height: 100%;
background: skyblue;
float: left;
}
#resize {
width: 5px;
height: 100%;
cursor: w-resize;
float: left;
}
#right {
float: right;
width: 70%;
height: 100%;
background: tomato;
}
</style>
</head>
<body>
<div id="box">
<div id="left"></div>
<div id="resize"></div>
<div id="right"></div>
</div>
<script>
window.onload = function () {
var resize = document.getElementById("resize");
var left = document.getElementById("left");
var right = document.getElementById("right");
var box = document.getElementById("box");
resize.onmousedown = function (e) {
var startX = e.clientX;
resize.left = resize.offsetLeft;
document.onmousemove = function (e) {
var endX = e.clientX;
var moveLen = resize.left + (endX - startX);
var maxT = box.clientWidth - resize.offsetWidth;
if (moveLen < 150) moveLen = 150;
if (moveLen > maxT - 150) moveLen = maxT - 150;
resize.style.left = moveLen;
left.style.width = moveLen + "px";
right.style.width = (box.clientWidth - moveLen - 5) + "px";
}
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
resize.releaseCapture && resize.releaseCapture();
}
resize.setCapture && resize.setCapture();
return false;
}
}
</script>
</body>
</html>