jQuery / Comparer width, innerWidth et outerWidth

.width() mesure le contenu, .innerWidth() ajoute le padding horizontal et .outerWidth() ajoute aussi les bordures. .outerWidth(true) inclut les marges horizontales. Ces méthodes renvoient des nombres en pixels, distincts d’une chaîne CSS width.

Choisir la limite à mesurer

Le modèle de boîte CSS entoure le contenu de padding, bordure et marge. Choisissez la limite adaptée ; un nombre plus grand n’est pas forcément plus exact.

Conditions : CSS width 200px, padding 20px, bordure 5px et marge 10px de chaque côté. .width() mesure toujours le contenu en border-box ; .innerWidth() et .outerWidth() ajoutent leurs limites respectives.

Avec box-sizing content-box, l’extérieur vaut 200+40+10=250. En border-box, padding et bordures entrent dans CSS 200, laissant un contenu de 150. Le sens de .width() reste identique ; celui de l’affectation CSS change.

Exemple complet de comparaison

Enregistrez tout en UTF-8 sous width-demo.html et ouvrez-le dans le navigateur. Internet charge le fichier officiel jQuery 4.0.0. Aucun serveur ou paquet n’est nécessaire. Valeurs initiales, changement et restauration du padding, puis fractions ont été exécutés dans Edge sous Windows avec 3.7.1 et 4.0.0.

Seul box-sizing diffère au départ. .case permet un défilement horizontal local sur écran étroit. margin dans la sortie est le total .outerWidth(true), pas seulement la marge.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Compare jQuery width measurements</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 20px; }
    button { font: inherit; margin: 4px; }
    .case { overflow-x: auto; background: #f4f7f8; margin: 12px 0; }
    .box { width: 200px; padding: 20px; border: 5px solid teal; margin: 10px; background: #fff; }
    #content { box-sizing: content-box; }
    #border { box-sizing: border-box; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <button type="button" id="padding">Toggle padding 20 / 40</button>
  <button type="button" id="fraction">Toggle width 200 / 200.5</button>
  <button type="button" id="reset">Reset</button>
  <div class="case"><div class="box" id="content">content-box</div></div>
  <div class="case"><div class="box" id="border">border-box</div></div>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      let padding = 20, width = 200;
      function report() {
        const lines = [];
        $(".box").each(function () {
          const $box = $(this);
          lines.push(`${this.id}: css=${$box.css("width")}; width=${$box.width()}; inner=${$box.innerWidth()}; outer=${$box.outerWidth()}; margin=${$box.outerWidth(true)}`);
        });
        $("#result").text(lines.join("\n"));
      }
      $("#padding").on("click", function () {
        padding = padding === 20 ? 40 : 20;
        $(".box").css("padding", padding + "px"); report();
      });
      $("#fraction").on("click", function () {
        width = width === 200 ? 200.5 : 200;
        $(".box").css("width", width + "px"); report();
      });
      $("#reset").on("click", function () {
        padding = 20; width = 200;
        $(".box").css({ padding: "20px", width: "200px" }); report();
      });
      report();
    });
  </script>
</body>
</html>

Sortie initiale : mêmes largeurs CSS, mesures du contenu et des bordures différentes.

content: css=200px; width=200; inner=240; outer=250; margin=270
border: css=200px; width=150; inner=190; outer=200; margin=220

1. Toggle padding 20 / 40 conserve width=200 en content-box ; inner=280, outer=290, margin=310.
2. border-box garde une bordure extérieure à 200 : width=110, inner=190, outer=200, margin=220. Le contenu rétrécit.
3. Appuyez encore pour restaurer padding 20 et la sortie initiale.
4. Toggle width 200 / 200.5 augmente toutes les mesures de 0,5. Les nombres ne sont pas toujours entiers.
5. Reset restaure width et padding des deux boîtes sans changer les CSS globaux.

Nombres et plusieurs éléments

Sans argument, un getter mesure le premier élément correspondant. Utilisez .each() ou .map() pour tous. Après Reset, exécutez dans les outils de développement :

console.log($("#content, #border").width());
console.log($(".box").map(function () { return $(this).width(); }).get().join(","));
console.log($(".missing").width(), $(".missing").innerWidth(), $(".missing").outerWidth());

La première ligne lit content-box seulement ; la suivante, les deux contenus. Une sélection vide renvoie undefined avec les versions testées 3.7.1 et 4.0.0.

200
200,150
undefined undefined undefined

Distinguez largeur réellement nulle et collection vide. Vérifiez length et résultat pour éviter NaN en calculant avec undefined. .css("width") contient une unité et peut concaténer au lieu d’additionner. Tronquer systématiquement avec parseInt accumule des écarts entre éléments.

Ce texte concerne les getters. Un argument comme .width(200) modifie la largeur : omettez-le pour mesurer seulement.

Moment et limites visibles

Ne dépendez pas de mesures avec display:none sur l’élément ou un ancêtre. L’affichage temporaire peut être coûteux et peu fiable ; mesurez après mise en page réelle. visibility:hidden conserve au contraire la place. Images, polices et contenu dynamique peuvent changer les dimensions après disponibilité du DOM.

Pour les limites après transformation CSS, examinez getBoundingClientRect(). scale(0.5) sur content-box a donné .outerWidth()=250 et rectangle=125. Une rotation change également le rectangle englobant ; ces API ne sont pas interchangeables.

N’appliquez pas innerWidth ou outerWidth d’éléments ordinaires à window ou document ; utilisez les mesures .width() adaptées. Une somme incluant les marges n’explique pas chaque occupation du parent ou espace entre voisins.

Vérifiez barres de défilement, bordures de tableau fusionnées, zoom, arrondis et changements de disposition en situation. Alterner écritures de styles et lectures de dimensions peut multiplier les calculs de mise en page ; regroupez les opérations nécessaires.