Bugs and handling methods of offsetWidth in JS

This article mainly introduces the offsetWidth bug and solution in JavaScript in detail. It has certain reference value. Interested friends can refer to

offsetWidth represents the visible width of the object.
For example:

#p1 { width: 100px; height: 200px; background: red; }

Result: 100

#p1 { width: 100px; height: 200px; background: red; border: 2px solid black; }

Result: 104 (100 + 2 + 2)

#p1 { width: 100px; height: 200px; background: red; border: 2px solid black; padding: 20px; }

Result: 144 (100 + 2 + 2 + 20 + 20)

#p1 { width: 100px; height: 200px; background: red; margin: 4px; }

Result: 100

**

So,offsetWidth = width + padding + border, has nothing to do with margin.

**
Let’s look at an example:

Phenomena:The red p gradually becomes narrower until it disappears, no problem!

What if we add a border to p?

Phenomenon: The red p not only does not become narrower, but becomes wider and wider...

*

The reason is also very simple: it is the border The direct reason is that offsetWidth takes into account border. WhenTimeris polled, for the first time, width: 102 - 1 == 101, then offsetWidth immediately becomes 103; for the second time, width: 103 - 1 == 102, then offsetWidth immediately becomes 104; then the third time, width: 104 - 1 == 103, offsetWidth becomes 104...

If op.style.width = op.offsetWidth - 1 + 'px'; Change to -2, then the red p will not move, will not become wider or narrower, because offsetWidth is 102, minus 2 is 100 and The original width is equal. The next timeloops, the offsetWidth is equal to 100 plus the border's 2, and then subtracting 2 is still 100, so it doesn't move... *

The solution is also very simple, If you can't afford to offend, you can't afford to hide? No need for offsetWidth!

We all know that to get the interline style of an element, you can directly use element.style.width, but this is only for the interline style of the element. If it is written in css, you will not be able to get it. .

But there is a way:

• Use element.currentStyle.width / element.currentStyle.[' width'];

• In non-IE, use getComputedStyle(element, false)['width']

With the above package , we can solve the trouble caused by offsetWidth

[Related recommendations]

1.Javacript free video tutorial

2 .JavaScript form validation implementation code_javascript skills

3.Single line of JS to implement mobile terminal money format verification

4.vue v -Example tutorial of model form control binding

5.Detailed example of Bootstrap form validation formValidation

The above is the detailed content of Bugs and handling methods of offsetWidth in JS. For more information, please follow other related articles on the PHP Chinese website!