Regardons une routine ci-dessous
Copiez le code comme suit :
<script type="text/javascript">
minuterie variable
fonction stopMove(){
clearInterval (minuterie)
}
fonction startMove(){
var div=document.getElementById('ok')
clearInterval (minuterie)
timer=setInterval(fonction(){
ok.style.width=ok.offsetWidth-1+'px' ;//Théoriquement, la largeur devrait diminuer, mais en réalité elle augmente. La raison est l'attribut border dans la feuille de style, qui peut être résolu en le supprimant. .
},20)
}
</script>
<style type="text/css">
* {marge : 0 ; remplissage : 0}
corps {taille de police : 14 px ; hauteur de ligne : 24 px ; marge : 0px ; remplissage : 0px ;}
#ok{largeur:800px;hauteur: 200px;couleur de fond:vert foncé;bordure: 1px rouge solide }
</style>
</tête>
<corps>
<div id="ok"></div>
Faites attention aux commentaires, pourquoi ce phénomène se produit-il ? En fait, cela est dû à la bordure, car ok.style.width spécifie la largeur du div et offsetwidth fait référence à la largeur réelle, y compris la largeur de la bordure. Par conséquent, la valeur de largeur obtenue par la formule de droite est en fait un pixel plus grande que celle de gauche. La solution consiste à soustraire 3 pixels à chaque fois pour atteindre l'objectif de soustraire réellement un pixel. Ou utilisez parseInt(div.style.width) sur le côté droit, mais modifiez le div comme suit :
Copiez le code comme suit :
<div id="ok" style="width:200px:></div>
La solution ultime : utilisez currentstyle ou getcomputedstyle pour obtenir les propriétés.