Maison > Article > interface Web > Bugs et méthodes de gestion de offsetWidth en JS

Bugs et méthodes de gestion de offsetWidth en JS

Y2Joriginal: 2018-05-14 16:40:222766parcourir

Cet article présente principalement en détail le bogue offsetWidth et la solution en JavaScript. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

offsetWidth 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...

Le la raison est également très simple : c'est-à-dire que la raison directe de la bordure est que offsetWidth prend en compte la bordure. Lorsque le timer interroge, pour la première fois, width: 102 - 1 == 101, alors. le offsetWidth devient immédiatement 103 ; la deuxième fois, width : 103 - 1 == 102, puis offsetWidth devient immédiatement 104 ; puis la troisième fois, width : 104 - 1 == 103, offsetWidth devient 104...

Si op.style.width = op.offsetWidth - 1 + 'px'; est modifié en -2, alors le p rouge ne bougera pas et ne deviendra pas plus large ou plus étroit, car offsetWidth est de 102, moins 2 . 100 est égal à la largeur d'origine. La prochaine fois boucles, le offsetWidth sera égal à 100 plus le 2 de la bordure et il sera toujours 100, donc ça ne bouge pas. .. *

La solution est également très simple Simple, vous ne pouvez pas vous permettre d'offenser ou 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>

[Recommandations associées]

1 Javascript gratuit. tutoriel vidéo

2. Compétences en code_javascript de mise en œuvre de la validation du formulaire JavaScript

3 Une seule ligne de JS pour implémenter la vérification du format d'argent mobile

4. Tutoriel d'exemple de liaison de contrôle de formulaire Vue v-model

5 Exemple détaillé de validation de formulaire BootstrapValidation

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!

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

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：Exemple détaillé de formulaire de validation de formulaire BootstrapformValidationArticle suivant：Exemple détaillé de formulaire de validation de formulaire BootstrapformValidation

Articles Liés

Voir plus