Home > Article > Web Front-end > Bug problem and solution about offsetWidth in JavaScript

Bug problem and solution about offsetWidth in JavaScript

黄舟Original: 2017-05-21 13:18:501409browse

This article mainly introduces the bugs and solutions of offset Width in JavaScript in detail. It has certain reference value. If you are interested, Friends, you can refer to

offsetWidth represents the visible width of 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:

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

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

What if we add a border to p?

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

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

The reason is also very simple: it is the direct cause of border, because offsetWidth includes border. TimerWhen polling, for the first time, width: 102 - 1 == 101, then offsetWidth immediately It becomes 103; the second time, width: 103 - 1 == 102, then offsetWidth immediately becomes 104; and the third time, width: 104 - 1 == 103, offsetWidth becomes 104...

If you change op.style.width = op.offsetWidth - 1 + 'px'; to -2, then the red p will not move, nor will it become wider or narrower, because offsetWidth It is 102. Subtracting 2 means that 100 is equal to the original width. The next time loops, the offsetWidth will be equal to 100 plus the 2 of the border. Subtracting another 2 will still be 100, so it does not 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']

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

  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”
 </script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>offsetWidth</title>
 <style type="text/css">
  #p1 {
   width: 500px;
   height: 200px;
   background: red;
   border: 1px solid black;
  }
 </style>
</head>
<body>
 <p id="p1"></p>
 <script type="text/javascript">
  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);
 </script>
</body>
</html>

The above is the detailed content of Bug problem and solution about offsetWidth in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：Sharing on how to implement information scrolling effect in JavascriptNext article：Sharing on how to implement information scrolling effect in Javascript

See more

Bug problem and solution about offsetWidth in JavaScript

Related articles