Voyons d'abord comment ce bug se produit.
La copie de code est la suivante:
<style type = "text / css">
# div1 {
Largeur: 200px;
hauteur: 200px;
Contexte: rouge;
}
</ style>
La copie de code est la suivante:
<body>
<div id = "div1">
</div>
</docy>
Ce qui suit est le code JavaScript utilisé pour tester, dans le but de réaliser progressivement le div.
La copie de code est la suivante:
<script type = "text / javascript">
setInterval (function () {
var odiv = document.getElementById ("div1");
odiv.style.width = odiv.offsetwidth-1 + 'px';
}, 30);
</cript>
Le code JavaScript est très simple, il n'y a aucun problème à l'exécuter et le div que vous voulez se rédige progressivement.
Alors, comment ce bug de décalage a-t-il produit?
Maintenant, quelque chose de magique se produira si nous déplaçons le style. . .
Nous ajoutons une bordure de style à div1: 1px solide #ccccff;
La copie de code est la suivante:
<style type = "text / css">
# div1 {
Largeur: 200px;
hauteur: 200px;
Contexte: rouge;
Border: 1px solide #ccccff;
}
</ style>
À l'heure actuelle, lors de l'exécution du code, j'ai constaté que la div augmentait progressivement vers la droite. . . Le bug d'image est apparu. . . . C'est évidemment moins 1, pourquoi cela se produit-il?
Réfléchissons aux caractéristiques du décalage:
Exemple: DIV Largeur: 200px Border 1px. En fait, la largeur de décalage qu'il obtient est de 202px.
Alors, parlons-en à nouveau, lorsque le mouvement a commencé, la largeur de la div était en fait de 200px, et la largeur de décalage était 202
À l'heure actuelle, odiv.style.width = odiv.offsetwidth-1 + 'px'; Cette phrase est égale à ODIV.Style.Width = 202-1 = 201Px; puis attribuer la valeur à la largeur
Lorsque cette phrase est à nouveau exécutée, la largeur du div est 201px; Dans ce cas, 1px sera ajouté à chaque fois et il deviendra progressivement plus grand. Ceci est le bug de décalage.
Comment résoudre ce problème?
En fait, vous n'avez pas besoin de cette largeur de décalage. Nous utilisons la largeur! ! Écrivez une fonction pour obtenir directement une largeur dans le style CSS
Obtenez des styles qui ne sont pas entre les lignes:
La copie de code est la suivante:
fonction getStyle (obj, nom) {
if (obj.currentStyle) {
return obj.currentStyle [name];
} autre {
return getCompuledStyle (obj, null) [name];
}
}
Ensuite, nous modifions le code d'origine:
La copie de code est la suivante:
<script type = "text / javascript">
setInterval (function () {
var odiv = document.getElementById ("div1");
odiv.style.width = parseInt (getStyle (odiv, 'width')) - 1 + 'px';
}, 30);
fonction getStyle (obj, nom) {
if (obj.currentStyle) {
return obj.currentStyle [name];
} autre {
return getCompuledStyle (obj, null) [name];
}
}
</cript>
De cette façon, il n'y aura aucun problème avec le programme en cours d'exécution.