Bugs et méthodes de gestion de offsetWidth en JS-js tutoriel-php.cn

Bugs et méthodes de gestion de offsetWidth en JS

Y2J

Libérer： 2018-05-14 16:40:22

original

2852 Les gens l'ont consulté

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

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 :

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

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 ?

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

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

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>

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

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

Copier après la connexion

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