Explication détaillée de la différence entre style.width et offsetWidth dans js-js tutoriel-php.cn

Explication détaillée de la différence entre style.width et offsetWidth dans js

小云云

Libérer： 2017-12-22 10:10:33

original

2418 Les gens l'ont consulté

En tant que débutant, je rencontre souvent la confusion quant à savoir s'il faut utiliser style.width ou offsetWidth pour obtenir la largeur (hauteur, valeur supérieure...) d'un certain élément. Je vais vous apporter un article basé sur la différence entre style.width et offsetWidth en js (explication détaillée). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. J'espère que tout le monde pourra mieux comprendre la différence entre style.width et offsetWidth en js.

1. Lorsque le style est écrit en ligne, tel que

, vous pouvez utiliser style.width ou offsetWidth pour obtenir la largeur de l'élément. .

Cependant, lorsque le style est écrit dans la feuille de style, comme #box{ width: 100px; }, offsetWidth ne peut être utilisé que pour obtenir la largeur de l'élément, et la valeur renvoyée par style.width est vide.

2. style.width La largeur de l'élément obtenu est uniquement la largeur de p, excluant la largeur occupée par la bordure, le remplissage et la valeur de largeur est en px de.

La largeur de l'élément obtenue par offsetWidth est la valeur de width+border+padding (hors marge), et la valeur de retour n'est qu'une valeur numérique sans unité.

Comme le montre l'exemple suivant :

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

Copier après la connexion

La première sortie de la console Le résultat est : 300px

Le deuxième résultat affiché par la console est : 308 Remarque : 300+ 3x2 +1x2 = 308, sans unité

3. peut également être utilisé pour définir la largeur des éléments dans js, mais offsetWidth ne le peut pas.

Comme le montre l'exemple suivant :

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

Copier après la connexion

Les résultats de sortie de la console sont 208 200px 208 200px

C'est-à-dire qu'il dit que la définition de la largeur via style.width réussit, mais la définition de la largeur via offsetWidth échoue.

Recommandations associées :

Un résumé de certains problèmes de compatibilité et sujets aux erreurs dans js

Discussion sur les composants et les modèles dans Vue. js

Explication détaillée des fonctions appliquées et appelées en Js

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!