Question

下面这段代码应该改变元素的位置但是没有这样做。

//variables
var p1 = document.getElementById("player");
var px = 10;
var py = 10;

//@variables

//functions

function start() {
    setInterval(update, 100);
}

function update() {
    p1.style.left = (px + "px");
    p1.style.top = (py + "px");
    px = px + 10;
    py = py + 10;
}

//@functions

//start
start();
//@start`

我的HTML是：

<html>
<head>
    <title> jumpy </title>

    <style type="text/css">
        #player {
            position: absolute;
            background-color: white;
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
        #body {
            background-color: black;
        }

    </style>

</head>
<body id="body">
    <script src="jumpy.js"> </script>
    <div id="player"> </div> 
</body>
</html>

即使该位置是绝对的，它仍然不起作用。我在底部看到了答案，但它并没有解决我的问题。

Answer 1

您的问题是您的脚本在创建元素之前运行。结果document.getElementById("player");什么都不返回（元素尚未加载）。

将脚本标记移动到正文的末尾，或将代码包装在
中
window.addEventListener("load", function(){ // Your code. });

从此公寓，您的代码工作正常（requestAnimationFrame should be used to create animation with js, not setInterval除外）。如果没有，则问题出在其他地方。

window.addEventListener("load", function(){ //variables var p1 = document.getElementById("player"); var px = 10; var py = 10; //@variables //functions function start() { setInterval(update, 100); } function update() { p1.style.left = (px + "px"); p1.style.top = (py + "px"); px = px + 10; py = py + 10; } //@functions //start start(); //@start` });

#player { position: absolute; background-color: white; width: 100px; height: 100px; border-radius: 50%; } body { background-color: black; }

<div id="player"></div>

更新顶部和左侧样式时元素不更改位置

1 个答案: