Schauen wir uns unten eine Routine an
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
Var-Timer
Funktion stopMove(){
clearInterval(timer)
}
Funktion startMove(){
var div=document.getElementById('ok')
clearInterval(timer)
timer=setInterval(function(){
ok.style.width=ok.offsetWidth-1+'px' ;// Theoretisch sollte die Breite abnehmen, aber in Wirklichkeit nimmt sie zu. Der Grund dafür ist das Border-Attribut im Stylesheet, das durch Entfernen behoben werden kann .
},20)
}
</script>
<style type="text/css">
* {margin: 0;padding:0}
Körper {Schriftgröße: 14px;Zeilenhöhe: 24px;Rand: 0px;Padding: 0px;}
#ok{width:800px;height: 200px;background-color:darkgreen;border: 1px red solid }
</style>
</head>
<Körper>
<div id="ok"></div>
Achten Sie auf die Kommentare. Warum tritt dieses Phänomen auf? Tatsächlich wird es durch den Rand verursacht, da ok.style.width die Breite des Div angibt und sich offsetwidth auf die tatsächliche Breite bezieht, einschließlich der Randbreite. Daher ist der durch die Formel rechts erhaltene Breitenwert tatsächlich ein Pixel größer als der linke. Die Lösung besteht darin, jedes Mal 3 Pixel zu subtrahieren, um den Zweck der tatsächlichen Subtraktion eines Pixels zu erreichen. Oder verwenden Sie parseInt(div.style.width) auf der rechten Seite, aber ändern Sie das div wie folgt:
Kopieren Sie den Codecode wie folgt:
<div id="ok" style="width:200px:></div>
Die ultimative Lösung: Verwenden Sie currentstyle oder getcomputedstyle, um die Eigenschaften abzurufen.