web-dev-qa-db-fra.com

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

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

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(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
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

Dans cet exemple, vous pouvez voir qu'ils produisent les mêmes résultats. Si quelqu'un sait quelle est la différence, merci de me montrer la réponse appropriée.

Merci.

javascriptjquerycssdomstyles
110
zajke

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

Travailler avec des largeurs et des hauteurs

enter image description here

jQuery - Dimensions

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

254
zod

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

  • innerWidth/innerHeight - inclut un rembourrage mais pas de bordure
  • outerWidth/outerHeight - inclut le rembourrage, la bordure et éventuellement la marge
  • hauteur/largeur - hauteur de l'élément (pas de rembourrage, pas de marge, pas de bordure)
13
Default

  • width = obtenir la largeur,

  • innerWidth = obtenir la largeur + le remplissage,

  • outerWidth = obtenir la largeur + le rembourrage + la bordure et éventuellement la marge

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

Lisez également dans le jQuery docs ... Tout ce dont vous avez besoin est à peu près là

4
Chris G-Jones

Il semble nécessaire de parler des assignations de valeurs et de comparer la signification du paramètre "width" dans jq: (supposons que new_value soit défini en unité px)

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

Les trois instructions ne donnent pas le même effet: car la première instruction jquery définit le innerwidth de l'élément et non la "largeur". C'est délicat.

Pour obtenir le même effet, vous devez calculer les rembourrages avant (en supposant que var est pad), la bonne instruction pour que jquery obtienne le même résultat que js pur (ou le paramètre css 'width') est la suivante:

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

On peut aussi noter que pour:

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

w1 est la largeur intérieure, tandis que w2 est la largeur (signification de l'attribut css). Différence non décrite dans la documentation de l'API JQ.

Meilleures salutations

Trebly

Remarque: à mon avis, cela peut être considéré comme un bogue. JQ 1.12.4 devrait être présenté de manière définitive en présentant une liste de paramètres acceptés pour .css ('paramètre', valeur) car il existe différentes significations derrière les 'paramètres' acceptés, qui ont un intérêt mais doivent toujours être clairs. Dans ce cas, "largeur intérieure" ne signifie pas la même chose que "largeur". Nous pouvons trouver une trace de ce problème dans la documentation de .width (valeur) avec la phrase: "Notez que dans les navigateurs modernes, la propriété CSS width n'inclut pas le remplissage"

1
user161546