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:332293parcourir
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('box');
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('box');
box.style.width = '200px';
console.log(box.offsetWidth);
console.log(box.style.width);
box.offsetWidth = '400px';
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 200pxC'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!