Let's look at a routine below
Copy the code code as follows:
<script type="text/javascript">
var timer
function stopMove(){
clearInterval(timer)
}
function startMove(){
var div=document.getElementById('ok')
clearInterval(timer)
timer=setInterval(function(){
ok.style.width=ok.offsetWidth-1+'px' ;//Theoretically the width should be decreasing, but in reality it is increasing. The reason is the border attribute in the style sheet, which can be solved by removing it.
},20)
}
</script>
<style type="text/css">
* {margin: 0;padding:0}
body {font-size: 14px;line-height: 24px;margin: 0px;padding: 0px;}
#ok{width:800px;height: 200px;background-color:darkgreen;border: 1px red solid; }
</style>
</head>
<body>
<div id="ok"></div>
Pay attention to the comments, why does this phenomenon occur? In fact, it is caused by the border, because ok.style.width specifies the width of the div, and offsetwidth refers to the actual width, including the border width. Therefore, the width value obtained by the formula on the right is actually one pixel larger than that on the left. The solution is to subtract 3 pixels each time to achieve the purpose of actually subtracting one pixel. Or use parseInt(div.style.width) on the right side, but modify the div as follows:
Copy the code code as follows:
<div id="ok" style="width:200px:></div>
The ultimate solution: use currentstyle or getcomputedstyle to get the properties.