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

要实现这个效果，我们可以使用 JavaScript 和 CSS。

首先，我们需要一个包含内容的 div 元素，如下所示：

<div class="box">
  <p>这里是内容</p>
</div>

然后，我们可以使用 CSS 设置 div 元素的样式，包括宽度、高度、背景颜色等等：

.box {
  width: 300px;
  height: 200px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  overflow: hidden;
}

接下来，我们可以使用 JavaScript 监听 div 元素的鼠标事件，以实现上下左右拉伸。具体实现如下：

var box = document.querySelector('.box');
var isResizing = false; // 是否正在拉伸
var lastX, lastY; // 鼠标最后一次的位置

box.addEventListener('mousedown', function(e) {
  if (e.offsetX > box.offsetWidth - 10 || e.offsetY > box.offsetHeight - 10) {
    isResizing = true;
    lastX = e.clientX;
    lastY = e.clientY;
  }
});

box.addEventListener('mousemove', function(e) {
  if (isResizing) {
    var deltaX = e.clientX - lastX;
    var deltaY = e.clientY - lastY;
    box.style.width = box.offsetWidth + deltaX + 'px';
    box.style.height = box.offsetHeight + deltaY + 'px';
    lastX = e.clientX;
    lastY = e.clientY;
  }
});

box.addEventListener('mouseup', function(e) {
  isResizing = false;
});

在上面的代码中，我们首先使用 querySelector 方法获取 box 元素，并定义了两个变量 isResizing、lastX 和 lastY。然后，我们监听了 div 元素的 mousedown、mousemove 和 mouseup 事件，以实现上下左右拉伸。

在 mousedown 事件中，我们判断鼠标是否在 div 元素的右下角（10px 宽度范围内），如果是，则将 isResizing 设为 true，并记录鼠标最后一次的位置。

在 mousemove 事件中，我们判断 isResizing 是否为 true，如果是，则计算出鼠标移动的距离，然后分别设置 div 元素的宽度和高度，并更新 lastX 和 lastY 的值。

在 mouseup 事件中，我们将 isResizing 设为 false，以结束拉伸。

这样，就可以实现 div 元素的上下左右拉伸了。