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

最新推荐文章于 2024-04-18 13:21:59 发布

weixin_33743661

最新推荐文章于 2024-04-18 13:21:59 发布

阅读量591

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lanjianwc/p/4587189.html

版权

主要使用一下两个函数

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

转载于:https://www.cnblogs.com/lanjianwc/p/4587189.html

weixin_33743661

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JS控制页面元素位置移动

主要使用一下两个函数parseInt()substr()首先获取元素的IDvar j = document.getElementById("ID");然后获取位置属性var top = j.style.top//这里以控制元素上下位置距离，控制左右的话把top换成left即可需要注意的是，使用此方法需要把要移动的元素设置为绝对定位，样式...
复制链接

扫一扫