标签:
主要使用一下两个函数
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