145 votes

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 m'affichent 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.

333voto

zod Points 4034

21voto

Default Points 2791

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
  • outerWidth / outerHeight - comprend le rembourrage, la bordure et, éventuellement, la marge.
  • height / width - hauteur de l'élément (sans padding, sans marge, sans bordure)

5voto

Chris G-Jones Points 188
  • width = obtenir la largeur,

  • innerWidth = largeur obtenue + padding,

  • outerWidth = obtenir la largeur + padding + border et éventuellement la marge

Si vous voulez tester, ajoutez un peu de rembourrage, des marges et des bordures à vos classes .test et réessayez.

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

3voto

user161546 Points 69

Il semble nécessaire de parler des assignations de valeurs et de comparer la signification du paramètre "width" dans jq : (en supposant que la nouvelle_valeur 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 : car la première instruction jquery définit le 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 (en supposant que var est pads), la bonne instruction pour jquery pour obtenir le même résultat que le js pur (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 largeur (signification de l'attribut css) Différence 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 bug JQ 1.12.4. la solution devrait être d'introduire définitivement une liste de paramètres acceptés pour .css('parameter', value) car il y a plusieurs significations derrière les 'paramètres' acceptés, qui ont de l'intérêt mais doivent être toujours claires. Dans ce cas : 'innerwidth' n'aura pas la même signification que 'width'. On peut trouver une trace de ce problème dans la documentation de .width(value) avec la phrase : "Note that in modern browsers, the CSS width property does not include padding".

3voto

Gerard Points 852

Ce que je vois en ce moment c'est que innerWidth inclut l'ensemble du contenu

C'est-à-dire que si la fenêtre est 900px et le contenu est 1200px (et il y a un parchemin)

  • innerWidth me donne 1200px
  • outerWidth me donne 900px

Totalement inattendu à mes yeux

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X