Heim > Artikel > Web-Frontend > Detaillierte Erklärung des Unterschieds zwischen style.width und offsetWidth in js

Detaillierte Erklärung des Unterschieds zwischen style.width und offsetWidth in js

小云云Original: 2017-12-22 10:10:332332Durchsuche

Als Anfänger bin ich oft verwirrt, ob ich style.width oder offsetWidth verwenden soll, wenn ich die Breite (Höhe, oberer Wert ...) eines bestimmten Elements erhalte. Ich werde Ihnen einen Artikel bringen, der auf dem Unterschied zwischen style.width und offsetWidth in js basiert (ausführliche Erklärung). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Ich hoffe, dass jeder den Unterschied zwischen style.width und offsetWidth in js besser verstehen kann.

1. Wenn der Stil inline geschrieben ist, z. B. 5b127429c4ebf04538724d6c7714739c, können Sie style.width oder offsetWidth verwenden, um die Breite des Elements zu ermitteln .

Wenn der Stil jedoch im Stylesheet geschrieben ist, z. B. #box{ width: 100px }, kann offsetWidth nur verwendet werden, um die Breite des Elements und den von style.width zurückgegebenen Wert zu erhalten ist leer.

2. style.width Die Breite des erhaltenen Elements ist nur die Breite von p, ohne die durch Rand und Polsterung belegte Breite und den Breitenwert ist in der Einheit px.

Die durch offsetWidth erhaltene Breite des Elements ist der Wert von Breite + Rand + Polsterung (ohne Rand), und der Rückgabewert ist nur ein numerischer Wert ohne Einheit.

Wie im folgenden Beispiel gezeigt:

<head>
    <script>
      window.onload = function(){
        var box = document.getElementById(&#39;box&#39;);
        console.log(box.style.width); 
        console.log(box.offsetWidth); 
       }
</script>
  </head>
  <body>
    <p id="box" style="width:300px; height: 300px; padding:3px; margin: 1px; border: 1px solid red;"></p>
  </body>

Die erste Konsolenausgabe Das Ergebnis ist : 300px

Das zweite von der Konsole ausgegebene Ergebnis ist: 308 Hinweis: 300+ 3x2 +1x2 = 308, ohne Einheit

3. style .width kann auch verwendet werden, um die Breite von Elementen in js festzulegen, offsetWidth jedoch nicht.

Wie im folgenden Beispiel gezeigt:

<script>
      window.onload = function(){
        var box = document.getElementById(&#39;box&#39;);
        box.style.width = &#39;200px&#39;;
        console.log(box.offsetWidth);
        console.log(box.style.width);
        box.offsetWidth = &#39;400px&#39;;
        console.log(box.offsetWidth);
        console.log(box.style.width);
      }
    </script>
  </head>
  <body>
    <p id="box" style="width:300px; height: 300px; padding:3px; margin: 2px; border: 1px solid red;"></p>
  </body>

Die Konsolenausgabeergebnisse sind 208 200px 208 200px

Das ist es sagt, dass das Festlegen der Breite über style.width erfolgreich ist, das Festlegen der Breite über offsetWidth jedoch fehlschlägt.

Verwandte Empfehlungen:

Eine Zusammenfassung einiger Kompatibilitäts- und fehleranfälliger Probleme in js

Diskussion über Komponenten und Vorlagen in Vue. js

Detaillierte Erklärung der Funktionen anwenden und in Js aufrufen

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Unterschieds zwischen style.width und offsetWidth in js. 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：AngularJS implementiert die Funktion zur Formularüberprüfung der MobiltelefonnummerNächster Artikel：AngularJS implementiert die Funktion zur Formularüberprüfung der Mobiltelefonnummer

In Verbindung stehende Artikel

Mehr sehen