Question

为什么即使在应用window.setinterval函数后，测试div也不会向左移动？单击“开始动画”按钮后，它只显示div。

<body>
<div id="test">
It is just a test content
</div>
<button onclick="animate();">Start the animation</button>
<button onclick="sto();">Stop the animation</button>
<script>
var timeoutId;
var currentpos=0;
document.getElementById('test').style.backgroundColor="black";
document.getElementById('test').style.height="400px";
document.getElementById('test').style.width="300px";
document.getElementById('test').style.boxSizing="border-box";
document.getElementById('test').style.display="none";
function animate(){
    window.setTimeout(show,2000);
}
function show()
{
document.getElementById('test').style.left="0px";
document.getElementById('test').style.display="block";
timeoutId=window.setInterval(start,50);
}
function start()
{
    currentpos+=5;
    document.getElementById("test").style.left=currentpos + "px";
}
function sto()
{
    window.clearInterval(timeoutId);
}
</script>

Answer 1

您需要设置元素的位置。

document.getElementById("test").style.position = "absolute";

此外，固定和相对是css位置属性的其他可能值。

为什么以下代码不会将div向左移动

1 个答案: