为什么在使用 clearInterval 时 div.width 不起作用?
Why does div.width not work when using clearInterval?
我使用 set 和 clearInterval
制作了一个移动到其容器宽度末端的正方形。
如果我将宽度添加为数字,它会停止,但是当我添加 container.width
时它不起作用:
var container = document.getElementById('container')
var square = document.getElementById('mySquare')
function theAll(sq,con){
var pos = 0;
var moving = setInterval(move,10)
function move(){
if(pos == con.width){
clearInterval(moving)}
else{
pos++
sq.style.left=pos + "px";}
}}
theAll(square,container)
#container{
font-size: 100%;
font-family: Comic Sans MS;
background-color: blanchedalmond;
border-radius: 5px;
padding: 0;
width: 100%;
height: 60%;
display: flex;
flex-direction: column;
}
#mySquare{
width: 5%;
height: 5%;
background-color: blueviolet;
position: relative;
}
你可以试试把con.width
换成con.offsetWidth
我使用 set 和 clearInterval
制作了一个移动到其容器宽度末端的正方形。
如果我将宽度添加为数字,它会停止,但是当我添加 container.width
时它不起作用:
var container = document.getElementById('container')
var square = document.getElementById('mySquare')
function theAll(sq,con){
var pos = 0;
var moving = setInterval(move,10)
function move(){
if(pos == con.width){
clearInterval(moving)}
else{
pos++
sq.style.left=pos + "px";}
}}
theAll(square,container)
#container{
font-size: 100%;
font-family: Comic Sans MS;
background-color: blanchedalmond;
border-radius: 5px;
padding: 0;
width: 100%;
height: 60%;
display: flex;
flex-direction: column;
}
#mySquare{
width: 5%;
height: 5%;
background-color: blueviolet;
position: relative;
}
你可以试试把con.width
换成con.offsetWidth