Maison > Article > interface Web > Explication détaillée de la différence entre style.width et offsetWidth dans js

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

小云云original: 2017-12-22 10:10:332350parcourir

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 5b127429c4ebf04538724d6c7714739c, 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>

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：AngularJS implémente la fonction de vérification de formulaire de numéro de téléphone mobileArticle suivant：AngularJS implémente la fonction de vérification de formulaire de numéro de téléphone mobile

Articles Liés

Voir plus