js 鼠标拖拽改变div宽度高度,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<style type="text/css">
body,p{
margin: 0;
padding: 0;
}
#box {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
p {
font-size: 20px;
color: white;
}
</style>
<body>
<div id="box">
<p></p>
<p></p>
</div>
</body>
<script>
var box = document.getElementById("box");
var p1 = document.getElementsByTagName("p")[0];
var p2 = document.getElementsByTagName("p")[1];
box.onmousedown = function (e) {
var Ev = e;
var Ex = Ev.clientX;
var Ey = Ev.clientY;
var dw = box.offsetWidth;
var dh = box.offsetHeight;
var texb = "";
if (Ev.clientX < box.offsetLeft + box.offsetWidth) {
texb = true;
console.log(texb);
}
document.onmousemove = function (e) {
if (texb) {
var iE = e;
if (iE.clientY == 0) {
box.style.width = dw + (iE.clientX - Ex) + "px";
} else if (iE.clientX == 0) {
box.style.height = dh + (iE.clientY - Ey) + "px";
} else if(iE.clientY != 0 && iE.clientX != 0){
box.style.width = dw + (iE.clientX - Ex) + "px";
box.style.height = dh + (iE.clientY - Ey) + "px";
box.style.background = colorrim()
}else if(box.offsetWidth){
console.log("sfds")
box.style.width = "20px";
box.style.height = "20px";
}
}
document.onmouseup = function () {
document.onmousemove = null;
};
p1.innerText = "宽度:"+box.style.width;
p2.innerText = "高度:"+box.style.height;
};
};
p1.innerText = "宽度:200px";
p2.innerText = "高度:200px";
function colorrim(){
var a = Math.floor(Math.random() *256);
b = Math.floor(Math.random() *256);
c = Math.floor(Math.random() *256);
return "rgb("+ a +","+ b +","+ c +")"
}
</script>
</html>