Javascript Offset bug solution in motion_javascript skills

Let’s first take a look at how this bug occurs.

Copy code The code is as follows: #div1 { width: 200px; height : 200px; background: red; }

Copy code The code is as follows:

The following is the Javascript code used for testing, the purpose is to make the div slowly narrow.

Copy code

The code is as follows: setInterval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=oDiv.offsetWidth-1 'px'; },30);

The Javascript code is very simple. If you run it, there will be no problem. The desired div will gradually become smaller.

Then where does this offset bug come from?

Now let’s move the style and something magical will happen. . . We add a style border to div1: 1px solid #CCCCFF;

Copy code

The code is as follows:

#div1 { width: 200px; height : 200px; background: red; border: 1px solid #CCCCFF; } When I run the code at this time, I find that the div is slowly increasing to the right. . . image BUG suddenly appeared. . . . It is obviously minus 1. Why does this happen?

Let us think about the characteristics of offset:

Example: div width: 200px border 1px. Actually the offsetWidth he got is 202px.

So, let’s talk about it. When the movement just started, the width of the div was actually 200px, so the offsetWidth was 202

At this time oDiv.style.width=oDiv.offsetWidth-1 'px'; this sentence is equal to oDiv.style.width=202-1=201px; and then assign it to width

When this sentence is executed again, the width of the div is 201px; in this case, it will increase by 1px each time, but it will gradually become larger. This is the offset bug.

How to solve this problem?

In fact, you don’t need this offsetWidth. We use width ! ! Write a function to directly obtain the width in the css style

Get styles that are not between lines:

Copy code The code is as follows: function getStyle(obj, name) { If (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } Then let’s modify the original code:

Copy code The code is as follows: 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]; } else { return getComputedStyle(obj, null)[name]; } } This way the program will run without any problems.