Schauen wir uns zuerst an, wie dieser Fehler auftritt.
Die Codekopie lautet wie folgt:
<style type = "text/css">
#div1 {
Breite: 200px;
Höhe: 200px;
Hintergrund: Rot;
}
</style>
Die Codekopie lautet wie folgt:
<body>
<div id = "div1">
</div>
</body>
Das Folgende ist der JavaScript -Code, der zum Testen verwendet wird, um den Diven allmählich zu engagieren.
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
setInterval (function () {
var odiv = document.getElementById ("div1");
odiv.style.width = odiv.offsetwidth-1+'px';
}, 30);
</script>
Der JavaScript -Code ist sehr einfach, es gibt kein Problem damit, ihn auszuführen, und die gewünschte DIV wird allmählich kleiner.
Wie kam es also zu diesem Offset -Fehler?
Jetzt wird etwas Magisches passieren, wenn wir den Stil bewegen. . .
Wir fügen Div1: 1PX solide #CCCCff einen Stilrand hinzu.
Die Codekopie lautet wie folgt:
<style type = "text/css">
#div1 {
Breite: 200px;
Höhe: 200px;
Hintergrund: Rot;
Grenze: 1PX Solid #ccccff;
}
</style>
Zu diesem Zeitpunkt stellte ich beim Ausführen des Codes fest, dass die DIV nach und nach nach rechts zunahm. . . Bildfehler erschien. . . . Es ist offensichtlich minus 1, warum passiert das?
Denken wir über die Eigenschaften des Offsetes nach:
Beispiel: DIV -Breite: 200px Grenze 1px. Tatsächlich ist die Offsetwidth, die er bekommt, 202px.
Lassen Sie uns also noch einmal darüber sprechen, als die Bewegung zum ersten Mal begann, die Breite der DIV tatsächlich 200px und die Offsetwidth 202 betrug
Zu diesem Zeitpunkt odiv.style.width = odiv.offsetwidth-1+'px'; Dieser Satz entspricht odiv.style.width = 202-1 = 201px; und dann den Wert der Breite zuweisen
Wenn dieser Satz erneut ausgeführt wird, beträgt die Breite des Divs 201px; In diesem Fall wird 1PX jedes Mal hinzugefügt und wird allmählich größer. Dies ist der Fehler von Offset.
Wie löst ich dieses Problem?
Eigentlich brauchen Sie diese Offsetwidth nicht. Wir verwenden Breite! ! Schreiben Sie eine Funktion, um die Breite direkt im CSS -Stil zu erhalten
Holen Sie sich Stile, die sich nicht zwischen den Zeilen befinden:
Die Codekopie lautet wie folgt:
Funktion getStyle (OBJ, Name) {
if (obj.currentStyle) {
Rückgabe obj.currentStyle [Name];
} anders {
return getComputedStyle (obj, null) [Name];
}
}
Dann ändern wir den ursprünglichen Code:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
setInterval (function () {
var odiv = document.getElementById ("div1");
odiv.style.width = parseInt (getStyle (odiv, 'width')-1+'px';
}, 30);
Funktion getStyle (OBJ, Name) {
if (obj.currentStyle) {
Rückgabe obj.currentStyle [Name];
} anders {
return getComputedStyle (obj, null) [Name];
}
}
</script>
Auf diese Weise wird es keine Probleme mit dem Programmlauf geben.