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/

Answer 2

X和Y是数字。 CSS长度需要单位。添加一些px。

Answer 3

你缺少xx和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;
        }
    })();

Answer 4

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

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

4 个答案: