マウスの位置に基づいて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忘れてしまった：あなたはPXサフィックスを欠落していたhttp://jsfiddle.net/8LUwp/

Answer 2

XおよびYは数字である。 CSSの長さには単位が必要です。いくつかpxを追加します。

Answer 3

：

(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; 
    } 
})();​ 

（私はDIVを見えるようにするためには赤い背景をも追加しました）

jsFiddleを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の長さ属性（パディング、マージン、高さ、幅など）には単位 - ピクセル、emなどが必要です。したがって、次のようになります。

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>';