마우스 위치에 따라 div의 크기를 조정하는 방법은 무엇입니까?

Question

나는 마우스가 어디에 있는지에 따라 왼쪽, 오른쪽, 위, 아래로 확장되는 div를 만들려고합니다. 그러나 마우스를 움직이면 div가 팝업되고 아무 것도하지 않습니다. 내가하고있는 일이 뭐가 잘못 됐니?

(function() { 
    document.onmousemove = function(e) { 
     draw(e); 
    }; 

    function draw(e) { 
     var method = [ 
      e.pageX ? e.pageX : e.clientX, 
      e.pageY ? e.pageY : e.clientY 
     ]; 
     var X = method[0], 
      Y = method[1]; 
     var html = '<div class="box" style="padding-top:' + Y + ';padding-bottom:' + Y + ';padding-left:' + X + ';padding-right:' + X + '"></div>' 
      ; 
     document.body.innerHTML = html; 
    } 
})();​ 

Answer 1

당신은 단위 px을 잊었 :

(function() { 
    document.onmousemove = function(e) { 
     draw(e); 
    }; 

    function draw(e) { 
     var method = [ 
      e.pageX ? e.pageX : e.clientX, 
      e.pageY ? e.pageY : e.clientY 
     ]; 
     var X = method[0], 
      Y = method[1]; 
     var html = '<div class="box" style="background-color:red;padding-top:' + Y + 'px;padding-bottom:' + Y + 'px;padding-left:' + X + 'px;padding-right:' + X + 'px"></div>' 
      ; 
     document.body.innerHTML = html; 
    } 
})();​ 

jsFiddle (I도 볼 수 DIV 만들기 위해 빨간색 배경을 추가했습니다) : http://jsfiddle.net/8LUwp/

Answer 2

X 및 Y는 숫자입니다. CSS 길이에는 단위가 필요합니다. px을 추가하십시오.

Answer 3

당신은 PX 접미사 누락 된을 x 및 Y를 사용하여

(function() { 
     document.onmousemove = function(e) { 
      draw(e); 
     }; 

     function draw(e) { 
      var method = [ 
       e.pageX ? e.pageX : e.clientX, 
       e.pageY ? e.pageY : e.clientY 
      ]; 
      var X = method[0], 
       Y = method[1]; 
      var html = '<div class="box" style="padding-top:' + Y +"px" + ';padding-bottom:' + Y +"px" + ';padding-left:' + X +"px" + ';padding-right:' + X +"px" + '"></div>' 
       ; 
      document.body.innerHTML = html; 
     } 
    })();​ 

Answer 4

CSS 길이 속성 (여백, 여백, 높이, 너비 등)에 단위 - 픽셀, 엠 등이 필요합니다. 따라서 단지 가지고있는 것 :

padding-top:10 

은 유효하지 않습니다. 대신 당신은 단위를 추가해야합니다

padding-top:10px 

그래서 귀하의 경우 HTML을 설정 라인을 읽어야합니다

var html = '<div class="box" style="padding-top:' + Y + 'px;padding-bottom:' + Y + 'px;padding-left:' + X + 'px;padding-right:' + X + 'px"></div>';