Q. I want to use the move function in JS to move the diagonal line of the small picture downward, but the code is almost the same. The left can be moved, but the top cannot be moved {code...}

javascript - Using JS to modify the position attribute of an element, why is style.left feasible but style.top invalid?

Q. I want to use the move function in JS to move the diagonal line down of the small picture, but the code is almost the same. The left can be moved, but the top cannot be moved.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>台球桌</title>
<style type="text/css">
*{
    padding:0;
    margin:0;
}
p{
    background:url(../PICTURE/table.JPG) no-repeat;
    height:260px;
    width:465px;
}
#ball{}
</style>
<script>
function init(){
    var timer = setInterval("move()",50);    
}
function move(){
    var ball = document.getElementById("ball");
    left = parseInt(ball.style.left);
    left += 1;
    top = parseInt(ball.style.top);
    top += 1;
    ball.style.left = left + "px";
    ball.style.top = top + "px";    
}
</script>
</head>

<body onload="init()">
<p>
<img src="../PICTURE/ball.png" id="ball" style="position:absolute;left:6px;top:5px;"/>
</p>
</body>
</html>

PHP中文网2728 days ago637

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>top</title> </head> <body> <p style="width: 100px;height: 100px;position: absolute;top: 10px;left: 10px;background-color: #1b6d85" id="ball"></p> <script type="text/javascript"> function init(){ setInterval("move()",100); } function move(){ var ball = document.getElementById("ball"); var left = parseInt(ball.style.left); left += 1; var top = parseInt(ball.style.top); top += 1; ball.style.left = left + "px"; ball.style.top = top + "px"; } init(); </script> </body> </html>

javascript - Using JS to modify the position attribute of an element, why is style.left feasible but style.top invalid?

reply all(1)I'll reply