Question

使用以下代码，每次文档悬停时，我都会尝试在屏幕上移动一个小点。

问题在于＆＃34; x.style.left＆＃34;初始化但未定义的属性在第一次更新时（我使用console.log检查）但之后它不再更新并保持该值，即使我在代码中进一步更改了它。

这是代码：

var x = document.getElementById("bot");
document.onmouseover = function(){move()};


function myfunc(){

}

function move(){
       x.style.position="relative";
       x.style.left;
       console.log(x.style.left);
       x.style.left=String(10 + 10) + "px";
       console.log(x.style.left);
}

小提琴：https://jsfiddle.net/puxg59td/

Answer 1

您需要获取值并每次添加。

function move(){
       x.style.position="relative";
       var value = parseInt(x.style.left);
       if (!value) {
           value = 0;
       }
       console.log(x.style.left);
       x.style.left=String(value + 10 + 10) + "px";
       console.log(x.style.left);
}

小提琴：https://jsfiddle.net/puxg59td/1/

Answer 2

更新（这是jsfiddle更新：https://jsfiddle.net/puxg59td/10/）：

＆＃13;

var x = document.getElementById("bot");
document.onmouseover = function(){move()};

function move(){
    x.style.position="relative";
    var curLeft = parseInt(x.style.left) || 0;
    x.style.left= (curLeft + 10) + "px";
}

＆＃13;

#body{
    border:2px solid black;
    height:100px;
}


#bot{
    height:1px;
    width:1px;
    background-color:black;
    border:2px solid black;
}

＆＃13;

<div id="body">
  <div id="bot"></div>
</div>

＆＃13;

Answer 3

你必须增加位置。你的问题是你总是给x相同的20px左边风格; 试试这个：

function move(x){
   x.style.position="relative";
   var l = x.getBoundingClientRect().left;
   console.log(l);
   x.style.left =l + 20 + "px";
   console.log(x.style.left);
}

变量未被更改

3 个答案: