Javascript 如何永久更改对象的样式？

鉴于上面的css代码，我想向下移动我的图像。我希望每次点击一个按钮，它都能移动4倍

#one
{
    position: absolute;
    top: 325px;
}

和往常一样：

function lol(){
    document.getElementById("one").style.top = 100px;
}

它所做的就是把图像移到上面，当我把100px换成另一个值时，它只是把它移到那里。我希望结果位置是永久的，当我点击一个按钮时，它会向下移动特定的px（如果是负数），向上移动（如果是正数），再次点击它会使它按照如下方式移动，相对于第二个位置，而不是原始位置。有没有一种可能的方法，我可以不使用我不熟悉的其他方法，比如jQuery。

---

提前感谢。

您需要使用+=运算符

<button onClick="lol">

---

首先，您缺少通话中的

（）

：

function lol(){
   var x = document.getElementById("one").style.top
   x = (x+100)+'px'
}

parseInt

将解析字符串开头的数字，并在到达

px

时停止

现场示例：

函数lol（）{
var oneStyle=document.getElementById（“一”）.style；
var top=parseInt（oneStyle.top，10）；
oneStyle.top=（top+100）+“px”；
}

点击我
如前所述，我是一个

，获取按钮的当前偏移量并向其添加4px。然而，有一些小问题需要注意。请参见此工作示例：

var delta=4；
document.addEventListener（'DOMContentLoaded'，function（）{
var-button=document.getElementById（'my-button'）；
addEventListener（'click'，function（）{
var offset=parseInt（button.style.top）| 0；
button.style.top=（偏移量+增量）+“px”；
});
});
#我的按钮{
位置：绝对位置；
排名：0；
}
按钮
确定。获取值，然后添加4px。ohhh thaaanks！我很讨厌这个哈哈哈
不会做任何事情。如果下面的任何答案回答了您的问题，堆栈溢出的工作方式，您可以通过单击旁边的复选标记来“接受”答案。但前提是你的问题得到了回答；如果不是，请考虑在问题中添加更多的细节，或者在一个有助于最好的答案的评论上发表评论，说你还不明白。OOP对此很抱歉（），这将给出<代码> NAN100PX < /代码>。YEP刚刚意识到，感谢你指出<代码> OnCase< /Cord>方法甚至不起作用。1.
<button onClick="lol()">

function lol(){
    var oneStyle = document.getElementById("one").style;
    var top = parseInt(oneStyle.top, 10);
    oneStyle.top = (top + 100) + "px";
}