更改元素'；使用JavaScript递增地调整位置

我刚刚开始学习Javascript，从“深入项目”方法开始。我现在的目标是简单地让

div

元素向左移动10px，每移动一次鼠标。以下是我目前掌握的情况：

HTML

JavaScript

document.getElementById("test").onmouseover = function() {mouseOver()};
function mouseOver() {
    document.getElementById("test").style.left = "10px";
}

我理解为什么这不起作用——但是，我不确定如何让它起作用，也不确定应该使用什么搜索查询

---

谢谢您的时间。

您缺少的是，您没有增加元素的left属性的值

试试这个

---

您应该递增到每个函数调用

document.getElementById("test").onmouseover = function() {mouseOver()};
var increment = 10;
function mouseOver() {
    document.getElementById("test").style.left = increment + "px";
    increment += 10;
    alert(increment);
}

---

jquery动画谢谢！据我所知，代码的工作原理如下：1。增量长度集2。ID为“test”的元素在鼠标移到3上时调用函数“mouseOver”。mouseOver函数记录当前左侧（最初为0）4。属性“left”被设置为left当前的变量-在本例中为10。“px”在语法上是串联的。5.将10添加到左侧，并等待下一个鼠标悬停。

document.getElementById("test").onmouseover = function() {mouseOver()};
function mouseOver() {
    document.getElementById("test").style.left = "10px";
}

var left = 10;
document.getElementById("test").onmouseover = function() {mouseOver()};

function mouseOver() {
    console.log(document.getElementById("test").style.left);
    document.getElementById("test").style.left = left+"px";
    left+=10;
}

document.getElementById("test").onmouseover = function() {mouseOver()};
var increment = 10;
function mouseOver() {
    document.getElementById("test").style.left = increment + "px";
    increment += 10;
    alert(increment);
}