Javascript-Offset-Fehlerlösung in Motion_Javascript-Fähigkeiten

Werfen wir zunächst einen Blick darauf, wie dieser Fehler auftritt.

Code kopieren Der Code lautet wie folgt: #div1 { Breite: 200 Pixel; Höhe : 200px; Hintergrund: rot; }

Code kopieren Der Code lautet wie folgt:

Das Folgende ist der zum Testen verwendete Javascript-Code. Der Zweck besteht darin, das Div langsam einzugrenzen.

Code kopieren

Der Code lautet wie folgt: setInterval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=oDiv.offsetWidth-1 'px'; },30);

Der Javascript-Code ist sehr einfach. Wenn Sie ihn ausführen, wird das gewünschte Div nach und nach kleiner.

Woher kommt dann dieser Offset-Fehler?

Jetzt ändern wir den Stil und etwas Magisches wird passieren. . . Wir fügen div1 einen Stilrahmen hinzu: 1px solid #CCCCFF;

Code kopieren

Der Code lautet wie folgt:

#div1 { Breite: 200 Pixel; Höhe : 200px; Hintergrund: rot; Rand: 1 Pixel durchgehend #CCCCFF; } Wenn ich den Code zu diesem Zeitpunkt ausführe, stelle ich fest, dass das Div langsam nach rechts zunimmt. . . Plötzlich tauchte ein Bildfehler auf. . . . Es ist offensichtlich minus 1. Warum passiert das?

Lassen Sie uns über die Eigenschaften des Offsets nachdenken:

Beispiel: Div-Breite: 200 Pixel, Rand 1 Pixel. Tatsächlich beträgt die OffsetWidth, die er erhalten hat, 202px.

Als die Bewegung gerade begann, betrug die Breite des Div tatsächlich 200 Pixel, also betrug die OffsetWidth 202

Zu diesem Zeitpunkt ist oDiv.style.width=oDiv.offsetWidth-1 'px'; dieser Satz ist gleich oDiv.style.width=202-1=201px und weist ihn dann der Breite zu

Wenn dieser Satz erneut ausgeführt wird, beträgt die Breite des Div in diesem Fall 201 Pixel. Sie erhöht sich jedes Mal um 1 Pixel, wird jedoch allmählich größer. Das ist der Offset-Bug.

Wie kann dieses Problem gelöst werden?

Tatsächlich benötigen Sie diese OffsetWidth nicht. Wir verwenden Breite! ! Schreiben Sie eine Funktion, um die Breite direkt im CSS-Stil

zu erhalten Erhalten Sie Stile, die nicht zwischen Zeilen liegen:

Code kopieren Der Code lautet wie folgt: Funktion getStyle(obj, name) { If (obj.currentStyle) { return obj.currentStyle[name]; } sonst { return getComputedStyle(obj, null)[name]; } } Dann ändern wir den Originalcode:

Code kopieren Der Code lautet wie folgt: setInterval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1 'px'; },30); function getStyle(obj, name) { If (obj.currentStyle) { return obj.currentStyle[name]; } sonst { return getComputedStyle(obj, null)[name]; } } Auf diese Weise läuft das Programm ohne Probleme.