主要使用一下兩個函數
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 的開始位置到結尾的字串。 |