Javascript 如何根据鼠标位置调整div的大小？

我正在尝试制作一个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;
    }
})();​

（函数（）{
document.onmousemove=函数（e）{
抽签（e）；
};
功能图（e）{
var方法=[
e、 pageX？e.pageX:e.clientX，
e、 佩吉？佩吉：佩吉：佩吉
];
var X=方法[0]，
Y=方法[1]；
var html=''
;
document.body.innerHTML=html；
}
})();​

X

和

Y

是数字。CSS长度需要单位。添加一些

px

X

和

Y

是数字。CSS长度需要单位。添加一些

px

您忘记了装置

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

（函数（）{
document.onmousemove=函数（e）{
抽签（e）；
};
功能图（e）{
var方法=[
e、 pageX？e.pageX:e.clientX，
e、 佩吉？佩吉：佩吉：佩吉
];
var X=方法[0]，
Y=方法[1]；
var html=''
;
document.body.innerHTML=html；
}
})();​

（为了使DIV可见，我还添加了一个红色背景）

---

jsfdle:

您忘记了设备

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

（函数（）{
document.onmousemove=函数（e）{
抽签（e）；
};
功能图（e）{
var方法=[
e、 pageX？e.pageX:e.clientX，
e、 佩吉？佩吉：佩吉：佩吉
];
var X=方法[0]，
Y=方法[1]；
var html=''
;
document.body.innerHTML=html；
}
})();​

（为了使DIV可见，我还添加了一个红色背景）

---

jsiddle:

您缺少带有x和Y的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="padding-top:' + Y +"px" + ';padding-bottom:' + Y +"px" + ';padding-left:' + X +"px" + ';padding-right:' + X  +"px" + '"></div>'
                ;
            document.body.innerHTML = html;
        }
    })();​

（函数（）{
document.onmousemove=函数（e）{
抽签（e）；
};
功能图（e）{
var方法=[
e、 pageX？e.pageX:e.clientX，
e、 佩吉？佩吉：佩吉：佩吉
];
var X=方法[0]，
Y=方法[1]；
var html=''
;
document.body.innerHTML=html；
}
})();​

您缺少带有x和Y的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="padding-top:' + Y +"px" + ';padding-bottom:' + Y +"px" + ';padding-left:' + X +"px" + ';padding-right:' + X  +"px" + '"></div>'
                ;
            document.body.innerHTML = html;
        }
    })();​

（函数（）{
document.onmousemove=函数（e）{
抽签（e）；
};
功能图（e）{
var方法=[
e、 pageX？e.pageX:e.clientX，
e、 佩吉？佩吉：佩吉：佩吉
];
var X=方法[0]，
Y=方法[1]；
var html=''
;
document.body.innerHTML=html；
}
})();​

CSS长度属性（填充、边距、高度、宽度等）需要单位-px、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>';

var html=''；

CSS长度属性（填充、边距、高度、宽度等）需要单位-px、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>';

var html=''；

你每次都必须重写div吗？如果昆汀的答案不起作用，那么就在上建立一个示例。你每次都必须重写div吗？如果昆汀的答案不起作用，那么就在上建立一个示例