使用JS控制页面元素位置移动

主要使用一下两个函数

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 的开始位置到结尾的字串。

你可能感兴趣的:(js)