Comparaison de la relation entre la méthode native js pour obtenir la largeur et la hauteur et la méthode jquery pour obtenir les compétences width et height_javascript

Remarque : 1. Étant donné que la situation d'obtention de la hauteur est la même que la situation d'obtention de la largeur, seule la situation d'obtention de la largeur est discutée ci-dessous.
2. Les valeurs renvoyées par toutes les méthodes et attributs mentionnés ci-dessous sont sans unité.
　3. Pour faciliter l'explication, les situations suivantes sont représentées par des abréviations :

　obj -> représente l'objet DOM en JS natif ; représente l'objet JQuery en JQuery
Largeur -> obj.style .width
OffsetWidth -> obj.offsetWidth
$width -> obj.width()
$innerWidth -> obj.innerWidth()
$outerWidth -> obj.outerWidth()
padding -> Représente la somme de padding-left et padding-right de l'objet
　border -> Représente la somme de border-left-width et border-right-width de l'objet

Les propriétés associées de JS natif pour obtenir la largeur sont width et offsetWidth. La méthode d'acquisition de la largeur est obj.style.width, qui ne peut être obtenue que lorsque la largeur de l'objet est définie en ligne, sinon une chaîne vide est renvoyée. La valeur obtenue par offsetWidth est la même que la valeur externalWidth obtenue par l'objet dans JQuery. offsetWidth est une propriété non standard mais bien prise en charge.

JQuery dispose de trois méthodes pour obtenir la largeur : width(), innerWidth() et externalWidth(). Les méthodes d'utilisation spécifiques sont : obj.width(), obj.innerWidth(), obj.outerWidth(). width() obtient la largeur du contenu de l'objet, innerWidth() obtient la somme de la largeur du contenu et de la largeur de remplissage de l'objet, et externalWidth() obtient la largeur incluant la bordure, la largeur de remplissage et la largeur du contenu.

La relation entre ces cinq méthodes est la suivante :

width = $width;
offsetWidth = border padding width;
$innerWidth = padding width; = border padding width;

Ces cinq méthodes sont compatibles avec Firefox, Chrome, Opera, Safari, ie6, ie7, ie8 et ie9, mais il y a deux problèmes : 1. La largeur n'est pas définie ci-dessous, lorsque Chrome ouvre la page pour la première fois, toutes les largeurs obtenues sont fausses. Lors de sa deuxième ouverture, le résultat est conforme à Firefox. 2. Lorsque la largeur et la hauteur ne sont pas définies dans IE6, la barre de défilement n'apparaîtra pas.