Question

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

考虑到上面的css代码，我想向下移动我的图像。我希望每次点击按钮都能移动4px。

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

和平常：

<button onClick="lol">

它的作用是移动上面的图像，当我将100px更改为另一个值时，它只是将其移动到那里。我希望结果位置是永久性的，当我点击一个按钮时，它会向下移动特定的px（如果为负），向上移动（如果为正），再次单击它会使其按照以下方式移动，相对于其第二个位置，而不是原始位置。有没有可能的方法，我可以使用，而不使用我不熟悉的其他方法，如jQuery。提前谢谢。

Answer 1

首先，您错过了通话中的()：

<button onClick="lol()">

（onClick在规范[小写onclick]中也是c，但浏览器也允许onClick。）

然后，在函数中，获取当前值，将其转换为数字（忽略末尾的px），然后分配结果：

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

parseInt将解析字符串开头的数字，并在到达px时停止。

直播示例：

＆＃13;

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

＆＃13;

<button onClick="lol()">Click me</button>
<div id="one" style="position: absolute; top: 40px; left: 10px">I'm one</div>

＆＃13;

请注意，假设您首先使用内联样式top，而不是（例如）样式表中的值或只是元素的自然位置。

要使用样式表值或元素的自然位置，您需要getComputedStyle（或旧IE上的currentStyle）：

function lol(){
    var one = document.getElementById("one");
    var style = window.getComputedStyle ? window.getComputedStyle(one) : one.currentStyle;
    var top = parseInt(style.top, 10);
    one.style.top = (top + 100) + "px";
}

直播示例：

＆＃13;

function lol(){
    var one = document.getElementById("one");
    var style = window.getComputedStyle ? window.getComputedStyle(one) : one.currentStyle;
    var top = parseInt(style.top, 10);
    one.style.top = (top + 100) + "px";
}

＆＃13;

#one {
  position: absolute;
  top: 40px;
  left: 10px;
}

＆＃13;

<button onClick="lol()">Click me</button>
<div id="one">I'm one</div>

＆＃13;

Answer 2

如前所述，获取按钮的当前偏移量并向其添加4px。但是，有许多小问题需要注意。请参阅此工作示例：

var delta = 4;

document.addEventListener('DOMContentLoaded', function() {
  var button = document.getElementById('my-button');
  button.addEventListener('click', function() {
    var offset = parseInt(button.style.top) || 0;
    button.style.top = (offset + delta) + 'px';
  });
});

#my-button {
  position: absolute;
  top: 0;
}

<button id="my-button">Button</button>

Answer 3

您需要使用+ =运算符。

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

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

3 个答案: