Html/JS的应用（1）元素位置控制_js设置元素位置-优快云博客

本文链接：https://blog.youkuaiyun.com/InterspaceITX/article/details/124958823

使用JS实现网页上用方向键控制元素的位置

用JavaScript的事件监听部分时，自己试着编写了一个小玩意出来。
把这些代码直接复制进就能使用了。

在Js中，改变元素位置需要用

元素名.style.top 竖坐标 px 像素

元素名.style.left 横坐标 document.getElementById('');通过id获取

左上右下四个键分别是37，38，39，40

以下为代码↓

<!DOCTYPE html> 
<html>
<head>
<style>
    #target{
        position: absolute;
    }
    #t{
        position: absolute;
    }
</style>
</head>
<body>
    <div id="target">
        <p>#</p>
    </div>
    <div id="t" style="top:729px;">
   <p>========================================================================================================================</p>
    </div>
    <script>
        var oTarget = document.getElementById('target');
        var tTop = -21;
        var tLeft= -1;
        var up = 10;
        var lf = 10;
        var dw = 10;
        var rg = 10;
        document.onkeydown=function(e){
        switch(e.keyCode){
        case 37:
        if(tLeft>-1){tLeft-=lf;}
        else tLeft=1429;
        break;
        case 38:
        if(tTop>-21){tTop-=up;}
        break;
        case 39:
        if(tLeft<1429){tLeft+=rg;}
        else tLeft=-1;
        break;
        case 40:
        if(tTop<719){tTop+=dw;}
        break;
        }
        oTarget.style.top = tTop + 'px';
        oTarget.style.left = tLeft + 'px';
        }    
    </script>
</body>
</html>