完成了一个点触发div缩放功能，请问如何完成8个点的触发？

Question

<script type="text/javascript">

     function g(id){return document.getElementById(id)}

      var mouseOffsetX = 0;
      var mouseOffsetY = 0;
      isDraging = false;
     g('boxR').onmousedown = function(e){
       var e =e;
        mouseOffsetX = e.clientX - g('boxR').offsetLeft;
        mouseOffsetY = e.clientY - g('boxR').offsetTop;
        isDraging = true;
     }

     document.onmousemove =function(e){
       var e = e;
       var moveX = 0;
       var moveY = 0;

       if (isDraging === true) {
           moveX = e.clientX - mouseOffsetX;
           moveY = e.clientY - mouseOffsetY;

           g('box').style.width = moveX + 'px';
           g('box').style.height = moveY + 'px';
       }
     }

     document.onmouseup =function(e){
       isDraging = false;
     }   
    </script>

 上面是js部分。

<div class="box" id="box">
      <div class="boxL" id="boxL"></div>
      <div class="boxT" id="oxT"></div>
      <div class="boxR" id="boxR"></div>
      <div class="boxB" id="oxB"></div>
      <div class="boxLT" id="boxLT"></div>
      <div class="boxRT" id="boxRT"></div>
      <div class="boxLB" id="boxLB"></div>
      <div class="boxRB" id="boxRB"></div>
    </div>

上面是html部分

<style media="screen">
      .box{width: 200px;height: 200px;position: absolute;left: 100px;top: 100px;border: 1px solid black;}
      .boxL,.boxR,.boxT,.boxB,.boxLT,.boxRT,.boxRB,.boxLB{position: absolute;}
      .boxL{left: 0;top:50%;width: 10px;height:10px;cursor: w-resize;background:red;}
      .boxT{top: 0;left:50%;width:10px;height:10px;cursor: n-resize;background:red;}
      .boxR{right:0;top:50%;width:10px;height:10px;cursor: e-resize;background:red;}
      .boxB{bottom: 0;left:50%;width:10px;height:10px;cursor: s-resize;background:red;}
      .boxLT{left:0;top:0;width:10px;height:10px;background:red;cursor:nw-resize;}
      .boxRT{width: 10px;height:10px;cursor:ne-resize;background:red;right:0;top: 0;}
      .boxLB{width: 10px;height:10px;cursor:sw-resize;background:red;left:0;bottom:0;}
      .boxRB{width: 10px;height:10px;cursor:se-resize;background:red;right:0;bottom:0;}
    </style>

上面是css部分，

求大神们解惑，

Answer 1

循环啊，getElementsByTagName获取一组，for循环为每个加上缩放