Bugs and handling methods of offsetWidth in JS-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Bugs and handling methods of offsetWidth in JS

May 14, 2018 pm 04:40 PM

bug js offsetwidth

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;
}

Copy after login

Result: 100

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

Copy after login

Result: 104 (100 + 2 + 2)

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

Copy after login

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

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

Copy after login

Result: 100

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

**
Let’s look at an example:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset=&quot;utf-8&quot;&gt;
 &lt;title&gt;offsetWidth&lt;/title&gt;
 &lt;style type=&quot;text/css&quot;&gt;
  #p1 {
   width: 500px;
   height: 200px;
   background: red;
  }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p id=&quot;p1&quot;&gt;&lt;/p&gt;
 &lt;script type=&quot;text/javascript&quot;&gt;
  var op = document.getElementById(&#39;p1&#39;);
  setInterval(function() {
   op.style.width = op.offsetWidth - 1 + &#39;px&#39;;
  }, 50);
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

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

What if we add a border to p?

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset=&quot;utf-8&quot;&gt;
 &lt;title&gt;offsetWidth&lt;/title&gt;
 &lt;style type=&quot;text/css&quot;&gt;
  #p1 {
   width: 500px;
   height: 200px;
   background: red;
   border: 1px solid black;
  }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p id=&quot;p1&quot;&gt;&lt;/p&gt;
 &lt;script type=&quot;text/javascript&quot;&gt;
  var op = document.getElementById(&#39;p1&#39;);
  setInterval(function() {
   op.style.width = op.offsetWidth - 1 + &#39;px&#39;;
  }, 50);
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

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. When Timer is 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 time loops, 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']

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset=&quot;utf-8&quot;&gt;
 &lt;title&gt;offsetWidth&lt;/title&gt;
 &lt;style type=&quot;text/css&quot;&gt;
  #p1 {
   width: 500px;
   height: 200px;
   background: red;
   border: 1px solid black;
  }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p id=&quot;p1&quot;&gt;&lt;/p&gt;
 &lt;script type=&quot;text/javascript&quot;&gt;

  var op = document.getElementById(&#39;p1&#39;);
  function getStyle(obj, attr) {
   if (obj.currentStyle) {//IE
    return obj.currentStyle[attr];
   } else {
    return getComputedStyle(obj, false)[attr];
   }
  }
  alert(getStyle(op, &#39;width&#39;));//直接弹出 “500px”
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

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

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset=&quot;utf-8&quot;&gt;
 &lt;title&gt;offsetWidth&lt;/title&gt;
 &lt;style type=&quot;text/css&quot;&gt;
  #p1 {
   width: 500px;
   height: 200px;
   background: red;
   border: 1px solid black;
  }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p id=&quot;p1&quot;&gt;&lt;/p&gt;
 &lt;script type=&quot;text/javascript&quot;&gt;
  var op = document.getElementById(&#39;p1&#39;);
  function getStyle(obj, attr) {
   if (obj.currentStyle) {//IE
    return obj.currentStyle[attr];
   } else {
    return getComputedStyle(obj, false)[attr];
   }
  }
  setInterval(function() {
   //parseInt是因为getStyle()返回的是‘px&#39;带单位，要整数化
   op.style.width = parseInt(getStyle(op, &#39;width&#39;)) - 1 + &#39;px&#39;;
  }, 30);
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

[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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn