Veamos una rutina a continuación.
Copie el código de código de la siguiente manera:
<tipo de script="texto/javascript">
temporizador var
función detenerMovimiento(){
clearInterval(temporizador)
}
función iniciarMovimiento(){
var div=document.getElementById('ok')
clearInterval(temporizador)
temporizador=establecerIntervalo(función(){
ok.style.width=ok.offsetWidth-1+'px' ;// En teoría, el ancho debería disminuir, pero en realidad está aumentando. El motivo es el atributo de borde en la hoja de estilo, que se puede resolver eliminándolo. .
},20)
}
</script>
<tipo de estilo="texto/css">
* {margen: 0;relleno:0}
cuerpo {tamaño de fuente: 14px;alto de línea: 24px;margen: 0px;relleno: 0px;}
#ok{ancho:800px;alto: 200px;color de fondo:verde oscuro;borde: 1px rojo sólido;
</estilo>
</cabeza>
<cuerpo>
<div id="ok"></div>
Atentos a los comentarios, ¿por qué ocurre este fenómeno? De hecho, es causado por el borde, porque ok.style.width especifica el ancho del div y offsetwidth se refiere al ancho real, incluido el ancho del borde. Por lo tanto, el valor de ancho obtenido por la fórmula de la derecha es en realidad un píxel más grande que el de la izquierda. La solución es restar 3 píxeles cada vez para lograr el propósito de restar un píxel. O use parseInt(div.style.width) en el lado derecho, pero modifique el div de la siguiente manera:
Copie el código de código de la siguiente manera:
<div id="ok" estilo="ancho:200px:></div>
La solución definitiva: utilice currentstyle o getcomputedstyle para obtener las propiedades.