主要使用一下两个函数
parseInt()
substr()
首先获取元素的ID
var j = document.getElementById("ID");
然后获取位置属性
var top = j.style.top //这里以控制元素上下位置距离，控制左右的话把top换成left即可
需要注意的是，使用此方法需要把要移动的元素设置为绝对定位，样式中添加 position:absolute;
现在开始移动元素位置了，因为使用方法获取的元素应该为（“0px”）为string字符串类型，我们需要将他转换成number数字。并去掉后面的“px”；
j=parseInt(j.substr(0,j.length-2));
最后简单的加减法
j.style.top=(j+10)+"px"; //top属性增加及位置向下移动
附上一大块代码参考
<head> <meta charset="utf-8"> <script type="text/javascript" src="2.js"></script> <script > function move(fangxiang){ var per = document.getElementById("cc"); var j=per.style.top; var k=per.style.left; j=parseInt(j.substr(0,j.length-2)); k=parseInt(k.substr(0,k.length-2)); switch(fangxiang) { case 1: per.style.top=(j-10)+"px"; break; case 2: per.style.top=(j+10)+"px"; break; case 3: per.style.left=(k-10)+"px"; break; case 4: per.style.left=(k+10)+"px"; break; } } </script> </head> <body> <div style="width:500;height:500;background-color:pink"> <div style="background-color:blue;width:50;height:50;position:absolute;left:40px;top:40px" id="cc"></div> </div> <button style="margin-left:30px;" onclick="move(1)">W</button><br> <button onclick="move(3)">A</button> <button onclick="move(2)">S</button> <button onclick="move(4)">D</button><br> </body>
stringObject.substr(start,length)
| 参数 | 描述 |
|---|---|
| start | 必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。 |
| length | 可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。 |
原文：http://www.cnblogs.com/lanjianwc/p/4587189.html