Quelle est la différence entre la largeur, la largeur intérieure et la largeur extérieure, la hauteur, la hauteur intérieure et la hauteur extérieure dans jQuery

125

J'ai écrit un exemple 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, veuillez me montrer la réponse appropriée.

Merci.

javascript jquery css dom styles Zajke
la source
8
Avez-vous regardé la documentation jQuery?
Brad M
1
Essayez d'ajouter un remplissage, une bordure et une marge à votre <div>, et voyez si cela donne des résultats différents;)
Niet the Dark Absol
4
api.jquery.com/category/dimensions Cette page les décrit tous, et si vous cliquez sur chacun d'eux, vous obtenez encore plus d'informations.
JClaspill
J'ai cherché dans google, mais aucune des réponses ne répond à mes attentes.
zajke
@BradM - Aucun homme. Mais les résultats pour "différence entre width, innerWidth, externalWidth jquery" rien ne me dit dans l'essentiel.
zajke

Réponses:

16

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

  • innerWidth / innerHeight - inclut le rembourrage mais pas la bordure
  • externalWidth / externalHeight - inclut le remplissage, la bordure et éventuellement la marge
  • hauteur / largeur - hauteur de l'élément (pas de remplissage, pas de marge, pas de bordure)
Défaut
la source
4

  • width = obtenir la largeur,

  • innerWidth = obtenir la largeur + le remplissage,

  • externalWidth = obtenir la largeur + le remplissage + la bordure et éventuellement la marge

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

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

Chris G-Jones
la source
3

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éfinie 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: parce que la première instruction jquery définit la largeur intérieure de l'élément et non la "largeur". C'est délicat.

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 pur js (ou le paramètre css 'width') est:

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

On peut également noter que pour:

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

w1 est la largeur intérieure, tandis que w2 est la différence de largeur (signification de l'attribut css) qui n'est pas documentée dans la documentation de l'API JQ.

Meilleures salutations

Trebly

Note: à mon avis cela peut être considéré comme un bogue JQ 1.12.4 la façon de sortir devrait être d'introduire définitivement une liste de paramètres acceptés pour .css ('paramètre', valeur) car il y a différentes significations derrière 'paramètres' acceptées, qui présentent un intérêt mais doivent toujours être claires. 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 de remplissage"

user161546
la source
Twist ajouté: .css('width')est le même que .outerWidth()(c'est-à-dire qu'il inclut la bordure ainsi que le rembourrage) quand box-sizing: border-box;.
Bob Stein
0

D'accord avec toutes les réponses données ci-dessus. Le innerWidth/ innerheightsimple fait d'ajouter en termes de fenêtres ou de perspectives de navigateur comprend uniquement la zone de contenu de la fenêtre, rien d'autre, mais

outerWidth/ outerHeight inclut la zone de contenu de Windows et en plus de cela, il inclut également des éléments tels que des barres d'outils, des barres de défilement, etc. et ces valeurs seront toujours égales ou supérieures aux valeurs innerWidth / innerHeight.

J'espère que cela aide plus ...

Alok Ranjan
la source
0

Ce que je vois en ce moment, c'est que cela innerWidthinclut tout le contenu

C'est, si la fenêtre est 900pxet le contenu est 1200px(et il y a un défilement)

  • innerWidth Donne moi 1200px
  • outerWidth Donne moi 900px

Totalement inattendu à mes yeux

* Dans mon cas, le contenu est contenu dans un <iframe>

GWorking
la source