javascript - 如何根据鼠标位置调整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;
    }
})();​

(我还添加了红色背景以使 DIV 可见)

jsFiddle:http://jsfiddle.net/8LUwp/