Solution de bug Javascript Offset dans les compétences motion_javascript

Voyons d’abord comment ce bug se produit.

Copier le code Le code est le suivant : #div1 { largeur : 200 px ; hauteur : 200 px ; fond : rouge ; }

Copier le code Le code est le suivant :

Ce qui suit est le code Javascript utilisé pour les tests, le but est de réduire lentement le div.

Copier le code

Le code est le suivant : setInterval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=oDiv.offsetWidth-1 'px'; },30);

Le code Javascript est très simple. Si vous l'exécutez, il n'y aura aucun problème. Le div souhaité deviendra progressivement plus petit.

Alors d'où vient ce bug de décalage ?

Maintenant, changeons de style et quelque chose de magique se produira. . . Nous ajoutons une bordure de style à div1 : 1px solid #CCCCFF ;

Copier le code

Le code est le suivant :

#div1 { largeur : 200 px ; hauteur : 200 px ; fond : rouge ; bordure : 1 px solide #CCCCFF ; } Quand j'exécute le code à ce moment-là, je constate que le div augmente lentement vers la droite. . . image BUG est soudainement apparu. . . . Il s’agit évidemment de moins 1. Pourquoi cela se produit-il ?

Réfléchissons aux caractéristiques de l'offset :

Exemple : largeur div : 200 px, bordure 1 px. En fait, le offsetWidth qu'il a obtenu est de 202 px.

Alors parlons-en. Lorsque le mouvement vient de commencer, la largeur du div était en fait de 200px, donc le offsetWidth était de 202

À ce moment-là, oDiv.style.width=oDiv.offsetWidth-1 'px' ; cette phrase est égale à oDiv.style.width=202-1=201px, puis attribuez-la à width

; Lorsque cette phrase est à nouveau exécutée, la largeur du div est de 201px ; dans ce cas, elle augmentera de 1px à chaque fois, mais elle deviendra progressivement plus grande. C'est le bug de décalage.

Comment résoudre ce problème ?

En fait, vous n’avez pas besoin de ce offsetWidth. Nous utilisons la largeur ! ! Ecrire une fonction pour obtenir directement la largeur dans le style CSS

Obtenez des styles qui ne sont pas entre les lignes :

Copier le code Le code est le suivant : fonction getStyle(obj, nom) { Si (obj.currentStyle) { return obj.currentStyle[name]; } autre { return getComputedStyle(obj, null)[name]; } } Alors modifions le code original :

Copier le code Le code est le suivant : setInterval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1 'px'; },30); function getStyle(obj, name) { Si (obj.currentStyle) { return obj.currentStyle[name]; } autre { return getComputedStyle(obj, null)[name]; } } De cette façon, le programme fonctionnera sans aucun problème.