div内上下左右距离_js实现div上下左右拉伸

js实现div上下左右拉伸html>

div的拉伸

*{padding: 0;margin: 0;}

body{padding: 100px;}

#box{position: absolute;width: 150px;height: 150px;background: orangered;border: 10px solid lightcoral;}

/*

* 移动得距离就为点击位置坐标(clientX) - 移动后的位置坐标(clientX)，那么现在盒子总共的宽度就是其本身宽度(oBox.offsetWidth)加上前面坐标之差。向左拉伸原理差不多，就是多加个改变盒子的位置,盒子的offsetLeft等于光标移动后的位置坐标。我们对盒子就行绝对定位，获取它的left值，将它left值减去改变的距离，他就会向左边拉伸了。上下同理

*/

var oBox = document.getElementById('box');

oBox.onmousedown = function(e){

e = e ||event;

var x = e.clientX;

var y = e.clientY;

var oBoxL = oBox.offsetLeft;

var oBoxT = oBox.offsetTop;

var oBoxW = oBox.offsetWidth;

var oBoxH = oBox.offsetHeight;

var d = 0;

if(x 

d = 'left';

}

else if(x > oBoxL + o