Home > Article > Web Front-end > Bugs and handling methods of offsetWidth in JS

Bugs and handling methods of offsetWidth in JS

Y2JOriginal: 2018-05-14 16:40:222758browse

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:

<!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 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']

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

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

JavaScript css bootstrap 封装表单验证循环 JS 对象 margin padding border bug

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：Detailed example of Bootstrap form validation formValidationNext article：Detailed example of Bootstrap form validation formValidation

See more

Bugs and handling methods of offsetWidth in JS

Related articles