Heim >Web-Frontend >js-Tutorial >Fehler und Handhabungsmethoden von offsetWidth in JS

Fehler und Handhabungsmethoden von offsetWidth in JS

Y2JOriginal: 2018-05-14 16:40:222822Durchsuche

Dieser Artikel stellt hauptsächlich den OffsetWidth-Fehler und die Lösung in JavaScript im Detail vor. Interessierte Freunde können sich auf

OffsetWidth bezieht sich auf die sichtbare Breite des Objekts.
Zum Beispiel:

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

Ergebnis: 100

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

Ergebnis: 104 (100 + 2 + 2)

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

Ergebnis: 144 ( 100 + 2 + 2 + 20 + 20)

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

Ergebnis: 100

Also, offsetWidth = Breite + Polsterung + Rand und Marge Nichts.

**
Sehen wir uns ein Beispiel an:

<!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änomene: Das rote p wird allmählich schmaler, bis es verschwindet, kein Problem!

Was wäre, wenn wir p einen Rand hinzufügen würden?

<!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änomene: Das rote P wird nicht nur nicht schmaler, sondern es wird immer breiter...

Das Der Grund ist auch ganz einfach: Der direkte Grund für den Rand ist, dass die OffsetWidth den Rand berücksichtigt. Wenn der Timer zum ersten Mal abfragt, dann Breite: 102 - 1 == 101 Die OffsetWidth wird sofort zu 103; beim zweiten Mal wird die Breite: 103 - 1 == 102, dann wird die OffsetWidth sofort zu 104; beim dritten Mal wird die Breite: 104 - 1 == 103, die OffsetWidth wird 104...

Wenn op.style.width = op.offsetWidth - 1 + 'px'; in -2 geändert wird, bewegt sich das rote p nicht und wird nicht breiter oder schmaler, da offsetWidth 102 minus 2 ist . 100 ist gleich der ursprünglichen Breite, die offsetWidth ist gleich 100 plus 2 des Randes und wird immer noch 100 sein, sodass sie sich nicht verschiebt. .. *

Die Lösung ist auch sehr einfach. Einfach, können Sie es sich nicht leisten, zu beleidigen oder sich zu verstecken? OffsetWidth ist nicht erforderlich!

Wir alle wissen, dass Sie element.style.width direkt verwenden können, um den Interline-Stil eines Elements zu erhalten, aber dies gilt nur für den Interline-Stil des Elements, wenn es in CSS geschrieben ist , Sie werden es nicht bekommen.

Aber es gibt einen Weg:

Element verwenden.
aktuellerStil. width / element.currentStyle.['width'];
In Nicht-IE verwenden Sie 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>

Mit diesem Paket können wir die durch offsetWidth verursachten Probleme lösen

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

[Verwandte Empfehlungen]

1 Video-Tutorial

JavaScript-Formularvalidierungs-Code_Javascript-Kenntnisse

Einzelne Zeile von JS zur Implementierung der mobilen Geldformatüberprüfung

Beispiel-Tutorial zur Vue-V-Modell-Formularsteuerung

5. Detailliertes Beispiel für die Formularvalidierung von Bootstrap

Das obige ist der detaillierte Inhalt vonFehler und Handhabungsmethoden von offsetWidth in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detailliertes Beispiel für die Bootstrap-Formularvalidierung formValidationNächster Artikel：Detailliertes Beispiel für die Bootstrap-Formularvalidierung formValidation

In Verbindung stehende Artikel

Mehr sehen