Problème de bug et solution concernant offsetWidth en JavaScript-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Problème de bug et solution concernant offsetWidth en JavaScript

May 21, 2017 pm 01:18 PM

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

Copier après la connexion

Résultat : 100

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

Copier après la connexion

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

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

Copier après la connexion

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

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

Copier après la connexion

Résultat : 100

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

**
Regardons un exemple :

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

Copier après la connexion

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 ?

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

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 de ce site Web

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