如何在没有使用jQuery的情况下使元素跟随鼠标移动

Question

我有这个代码，但它无法运行。

var box = document.getElementById("box");

window.addEventListener('mousemove', function(e){
    var left = e.pageX;
    box.style.left = left;
});

如果我只是使用jQuery替换掉box.style.left = left;，它可以正常工作。

$('#wrap').css ({   
    left: left  
});

但我很困惑...为什么box.style.left = left;不起作用，它几乎是一样的呀？

- Magdi Gamal

Answer 1

CSS中的left属性需要单位。你没有给它任何单位。当你给jQuery的css一个数字时，它会为你添加"px"，这就是为什么jQuery代码能够工作的原因。

添加"px"：

box.style.left = e.pageX + "px";

- T.J. Crowder

---

谢谢！总是这种愚蠢的错误让我挠头数小时哈哈。 - Magdi Gamal

Answer 2

你还需要给予最高的价值。希望这段代码片段能够帮助你。

    var box = document.getElementById("box");

window.addEventListener('mousemove', function(e){
    var left = e.pageX+"px";
    box.style.left = left;
});

.moveAble {
    position: absolute;
}

<div id="box" class="moveAble">
AAAA
</div>

- user4906240

---

"你还必须提供顶部值"。原帖中说仅使用jQuery设置“left”是有效的，因此我们知道这不适用于他们的问题。（当然，如果您想水平和垂直跟随，则还必须设置“top”，但关键在于为什么使用DOM无法解决问题，而使用jQuery可以解决问题。） - T.J. Crowder

是的，你说得对。我错过了没有使用Jquery的部分。我已经更新了代码片段。 - user4906240