Quelle est la différence entre width, innerWidth et outerWidth, height, innerHeight et outerHeight dans jQuery

J’ai écrit quelques exemples pour voir quelle est la différence, mais ils affichent les mêmes résultats pour la largeur et la hauteur.

    $(document).ready(function(){ var div = $('.test'); var width = div.width(); // 200 px var innerWidth = div.innerWidth(); // 200px var outerWidth = div.outerWidth(); // 200px var height = div.height(); // 150 px var innerHeight = div.innerHeight(); // 150 px var outerHeight = div.outerHeight(); // 150 px });   .test { width: 200px; height: 150px; background: black; }    

Dans cet exemple, vous pouvez voir qu’ils produisent les mêmes résultats. Si quelqu’un sait quelle est la différence, montrez-moi la réponse appropriée.

Merci.

Avez-vous vu ces exemples? Ressemble à votre question.

Travailler avec des largeurs et des hauteurs

entrer la description de l'image ici

jQuery – Dimensions

jQuery: hauteur, largeur, intérieur et extérieur

Comme mentionné dans un commentaire, la documentation vous indique exactement quelles sont les différences. Mais en résumé:

  • innerWidth / innerHeight – inclut le remplissage mais pas la bordure
  • outerWidth / outerHeight – inclut un remplissage, une bordure et éventuellement une marge
  • height / width – hauteur de l’élément (pas de remplissage, pas de marge, pas de bordure)
  • width = obtenir la largeur,

  • innerWidth = get width + padding,

  • outerWidth = get width + padding + border et éventuellement la marge

Si vous souhaitez tester, ajoutez des marges, des marges et des bordures à vos classes .test et réessayez.

Lisez également dans les documents jQuery … Tout ce dont vous avez besoin est à peu près là

Il semble nécessaire de parler des affectations de valeurs et de comparer la signification du paramètre “width” dans jq: (supposons que new_value est défini dans l’unité px)

 jqElement.css('width',new_value); jqElement.css({'width: ;'}); getElementById('element').style.width= new_value; 

Les trois instructions ne donnent pas le même effet: car la première instruction jquery définit la largeur interne de l’élément et non la “largeur”. C’est difficile.

Pour obtenir le même effet, vous devez calculer les paddings avant (supposons que var is pads), la bonne instruction pour que jquery obtienne le même résultat que js pure (ou css paramètre ‘width’) est:

 jqElement.css('width',new_value+pads); 

Nous pouvons également noter que pour:

 var w1 = jqElement.css('width'); var w2 = jqelement.width(); 

w1 est la largeur interne, tandis que w2 est la largeur (signification de l’atsortingbut css) Différence qui n’est pas documentée dans la documentation de l’API JQ.

Meilleures salutations

Trebly


Note: à mon avis, ceci peut être considéré comme un bug JQ 1.12.4. La manière de le faire devrait être d’introduire définitivement une liste de parameters acceptés pour .css (‘paramètre’, valeur) car il y a plusieurs significations derrière ‘parameters’ accepté, qui ont un intérêt mais doit toujours être clair. Dans ce cas: “innerwidth” ne signifie pas la même chose que “width”. Nous pouvons trouver une trace de ce problème dans la documentation de .width (value) avec la phrase: “Notez que dans les navigateurs modernes, la propriété CSS width n’inclut pas le padding”