如何定期提升CSS价值？

Question

这是我的按钮。

<button onclick="myFunction()">Click me</button

而且是脚本..

function myFunction(){
 document.getElementById("x").style.marginLeft = +35 ;
}

当我按下按钮时，元素 x 移动但第二次按下不起作用。

Answer 1

试试这个

function myFunction(){
 let el = document.getElementById("x");
 el.style.marginLeft = Number(el.style.marginLeft.replace("px", "")) + 35 + "px" ;
}

Answer 2

您只是将 marginLeft 设置为数字 35。它并没有将 35 添加到边距。 marginLeft 也需要一个单位。所以你要说单位是什么。

所以需要读取当前值，去掉单位，添加新值，然后设置新值。

function myFunction(){
 var elem = document.getElementById("x");
 var current = Number(elem.style.marginLeft.replace("px", ''));
 elem.style.marginLeft = (current + 35) + "px" ;
}

#x {
  margin-left: 0px;
}

<button id="x" onclick="myFunction()">Click me</button>

如何定期提升CSS价值？

How Can I Enhance CSS Value Regularly?

javascript

css

frontend

dom

dom-events