Heim > Artikel > Web-Frontend > Fehlerproblem und Lösung zu offsetWidth in JavaScript

Fehlerproblem und Lösung zu offsetWidth in JavaScript

黄舟Original: 2017-05-21 13:18:501409Durchsuche

Dieser Artikel stellt hauptsächlich den Fehler und die Lösung von Set in JavaScript vor. Wenn Sie interessiert sind, Freunde, Sie können sich auf offsetWidth beziehen, das die sichtbare Breite des

-Objekts

darstellt. Zum Beispiel:

Ergebnis: 100

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

Ergebnis: 104 (100 + 2 + 2)

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

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

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

Ergebnis: 100

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

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?

Phänomene: Das rote P wird nicht nur nicht schmaler, sondern es wird immer breiter...

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

Der Grund ist auch ganz einfach: Es ist die direkte Ursache des Randes, denn offsetWidth berücksichtigt den Rand

Wenn der Timer

zum ersten Mal abfragt, Breite: 102 - 1 == 101, dann wird offsetWidth sofort 103; beim zweiten Mal wird width: 103 - 1 == 102, dann wird offsetWidth sofort 104; und beim dritten Mal wird width: 104 - 1 == 103, offsetWidth wird 104. ..
Wenn Sie op.style.width = op.offsetWidth - 1 + 'px'; auf -2 ändern, bewegt sich das rote p nicht und wird auch nicht breiter oder schmaler. Da die OffsetWidth 102 beträgt, bedeutet das Subtrahieren von 2, dass 100 der ursprünglichen Breite entspricht. Bei der nächsten

-Schleife

ist die OffsetWidth gleich 100 plus der 2 des Randes, und wenn dann 2 subtrahiert wird, ist dies immer noch der Fall 100, damit es sich nicht bewegt...*Die Lösung ist auch ganz einfach: Wenn Sie es sich nicht leisten können, zu beleidigen, können Sie es sich nicht leisten, 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:

aktueller
Stil. width / element.currentStyle.['width'];

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];
   }
  }
  alert(getStyle(op, &#39;width&#39;));//直接弹出 “500px”
 </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonFehlerproblem und Lösung zu offsetWidth in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Teilen Sie mit, wie Sie den Informations-Scroll-Effekt in Javascript implementierenNächster Artikel：Teilen Sie mit, wie Sie den Informations-Scroll-Effekt in Javascript implementieren

In Verbindung stehende Artikel

Mehr sehen