I did a demo. If a div does not add the border attribute, the Offsetwidth property of the object is used to control width, but if the border attribute is added, the problem comes.
In fact, the Offsetwidth property gets the div content width plus the internal and external margins and the width of the border, so in order to better solve this bug, I have a getstyle method to effectively solve the bug. Here's the code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Test</title></Head><styletype= "Text/css">Div{width:200px;Height:200px;background:Red;Border:2px solid Blue;}</style><Scripttype= "Text/javascript">window.onload= function() { varOdiv=document.getElementsByTagName ("Div")[0]; Startmove (); functionStartmove () {setinterval (function() {oDiv.style.width=parseint (GetStyle (Odiv,"width"))-1+"px"; }, -); } functionGetStyle (obj,attr) {if(obj.currentstyle) {returnObj.currentstyle[attr]; }Else{ returngetComputedStyle (obj,false) [attr]; } }}</Script><Body> <Div></Div></Body></HTML>
Effectively solve the problem of animation bug after adding border in JS