Maison >interface Web >js tutoriel >Problème de bug et solution concernant offsetWidth en JavaScript

Problème de bug et solution concernant offsetWidth en JavaScript

黄舟original: 2017-05-21 13:18:501426parcourir

Cet article présente principalement en détail le bug et la solution du décalageset Width en JavaScript Il a une certaine valeur de référence. vous pouvez vous référer à

offsetWidth qui représente la largeur visible de l' objet .
Par exemple :

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

Résultat : 100

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

Résultat : 104 (100 + 2 + 2)

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

Résultat : 144 ( 100 + 2 + 2 + 20 + 20)

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

Résultat : 100

Donc, offsetWidth = largeur + rembourrage + bordure, et marge Rien.

**
Regardons un exemple :

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

Phénomènes : Le p rouge se rétrécit progressivement jusqu'à disparaître, pas de problème !

Et si on ajoutait une bordure à 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>

Phénomènes : Non seulement le p rouge ne devient pas plus étroit, mais il devient de plus en plus large...

La raison est aussi très simple : c'est la cause directe de la bordure, car offsetWidth prend en compte la bordure Quand le timer interroge, pour la première fois, la largeur : 102 - 1 == 101, puis offsetWidth devient immédiatement 103 ; la deuxième fois, width : 103 - 1 == 102, puis offsetWidth devient immédiatement 104 et la troisième fois, width : 104 - 1 == 103, offsetWidth devient 104 ; ..

Si vous modifiez op.style.width = op.offsetWidth - 1 + 'px'; en -2, alors le p rouge ne bougera pas et ne deviendra pas plus large ou plus étroit. Étant donné que offsetWidth est de 102, soustraire 2 signifie que 100 est égal à la largeur d'origine. La prochaine fois que bouclera , offsetWidth sera égal à 100 plus le 2 de la bordure, puis soustraire 2 sera toujours. 100, donc ça ne bouge pas...*

La solution est aussi très simple Si vous ne pouvez pas vous permettre d'offenser, vous ne pouvez pas vous permettre de vous cacher ? Pas besoin de offsetWidth !

Nous savons tous que pour obtenir le style interligne d'un élément, vous pouvez utiliser directement element.style.width, mais ce n'est que pour le style interligne de l'élément s'il est écrit en CSS. , vous ne pourrez pas l'obtenir

Mais il existe un moyen :

Utiliser l'élément.actuelStyle. width / element.currentStyle.[' width'];
Dans non-IE, utilisez 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>

Avec ce qui précède Avec ce package, nous pouvons résoudre les problèmes causés par 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partage sur la façon d'implémenter l'effet de défilement des informations en JavascriptArticle suivant：Partage sur la façon d'implémenter l'effet de défilement des informations en Javascript

Articles Liés

Voir plus