Vejamos uma rotina abaixo
Copie o código do código da seguinte forma:
<script type="texto/javascript">
var temporizador
função pararMove(){
clearInterval(temporizador)
}
função startMove(){
var div=document.getElementById('ok')
clearInterval(temporizador)
temporizador=setInterval(função(){
ok.style.width=ok.offsetWidth-1+'px' ;//Teoricamente a largura deveria estar diminuindo, mas na realidade está aumentando O motivo é o atributo border na folha de estilos, que pode ser resolvido removendo-o. .
},20)
}
</script>
<style type="texto/css">
* {margem: 0; preenchimento: 0}
corpo {tamanho da fonte: 14px; altura da linha: 24px;margem: 0px;preenchimento: 0px;}
#ok{largura:800px;altura: 200px;cor de fundo:verde escuro;borda: 1px sólido vermelho };
</estilo>
</head>
<corpo>
<div id="ok"></div>
Preste atenção nos comentários, por que esse fenômeno ocorre? Na verdade, isso é causado pela borda, porque ok.style.width especifica a largura do div e offsetwidth refere-se à largura real, incluindo a largura da borda. Portanto, o valor da largura obtido pela fórmula à direita é na verdade um pixel maior que o da esquerda. A solução é subtrair 3 pixels de cada vez para atingir o objetivo de subtrair realmente um pixel. Ou use parseInt(div.style.width) no lado direito, mas modifique o div da seguinte forma:
Copie o código do código da seguinte forma:
<div id="ok" style="largura:200px:></div>
A solução definitiva: use currentstyle ou getcomputedstyle para obter as propriedades.