javascript - 使用 JavaScript 增加上/左/下/右值

Question

我正在尝试将元素的位置增加x像素。这是我迄今为止尝试过的：

var top = document.getElementById("something").style.top;
top = top + "300px"

我知道这行不通，但我想知道是否可以增加这样的位置值。

score 19 · Accepted Answer

因为style.top它是一个末尾带有单位的字符串，就像"300px"您仅将数字部分转换为实际数字时才能对其进行数学运算一样。

假设你有一个定位元素（所以设置top值会做一些事情）并且你已经top在元素上直接设置了一个样式而不是通过 CSS 设置（所以 getobj.style.top实际上会给你一些东西），你可以通过解析数字来做到这一点的样式值是这样的：

var obj = document.getElementById("something");
var topVal = parseInt(obj.style.top, 10);
obj.style.top = (topVal + 300) + "px";

score 3 · Accepted Answer

这将无法正常工作，因为例如，如果top值为200px，它将变为"200px300px"。试试这个：

var elem = document.getElementById("something");
elem.style.top = parseInt(elem.style.top, 10) + 300 + "px"

score 0 · Accepted Answer

let top = 0;
let left = 0;
let text = document.getElementById("TextToTranslate");
text.setAttribute("style","top:"+top+"px; "+left+":px;");

在while循环中使用它，它工作正常，我只是想知道如何减慢它，以便我可以看到过渡

3 回答 3