Question

怎样用js实现每次点击按钮都使div向右移动50px

Answer 1

HTML部分
//要移动的div(操作的对象)

<div class="test" style="background:#f00;width:100px;height:100px;"></div>
//按钮来触发事件
<input type="button" value="移动" id="move"/>
原生js实现
var btn_click=document.getElementById("move"); //获取点击按钮
var box=document.querySelector(".test");//获取要移动的div
var a=0;
btn_click.onclick=function(){
a=a+50;
box.style.left=a+'px'; //每点击一次，向右移动50px
}

Answer 2

var div = document.getElementById('divid');    //divid为目标的id
document.onclick = function(){
    var oleft = div.getBoundingClientRect().left;
    div.style.position = 'absolute';
    div.style.left = oleft + 50 + 'px';
}

Answer 3

<div id="test" style="width:100px;height:60px;background-color:gray;position:absolute"></div>
<script type="text/javascript">
var myLeft;
var mover = 50;
var test = document.getElementById("test");
test.onclick = function(){
myLeft = parseInt(this.style.left);

if(isNaN(myLeft)){
myLeft = 0;
}

this.style.left = myLeft + mover + "px";

}
</script>

追问

谢谢谢谢

可是点击按钮然后让它移动怎么弄呢

?

Answer 4

动态设置div的样式 距离右边的距离