jQuery / Comparar width, innerWidth y outerWidth

.width() mide contenido, .innerWidth() añade padding horizontal y .outerWidth() también bordes. .outerWidth(true) incluye márgenes horizontales. Devuelven números en píxeles, distintos de una cadena CSS width.

Elegir el límite de medición

El modelo de caja CSS rodea el contenido con padding, borde y margen. Elija el límite necesario; un número mayor no es automáticamente más preciso.

Condiciones: CSS width 200px, padding 20px, borde 5px y margen 10px por lado. .width() sigue midiendo contenido en border-box; .innerWidth() y .outerWidth() añaden sus respectivos límites.

Con box-sizing content-box, el exterior es 200+40+10=250. En border-box, padding y borde caben dentro de CSS 200, dejando contenido 150. El significado de .width() no cambia; cambia el alcance de la asignación CSS.

Ejemplo completo de comparación

Guarde todo en UTF-8 como width-demo.html y ábralo en el navegador. Internet carga el archivo oficial de jQuery 4.0.0. No requiere servidor ni paquetes. Valores iniciales, cambios y restauración de padding y fracciones se ejecutaron en Edge para Windows con 3.7.1 y 4.0.0.

Las condiciones iniciales difieren solo en box-sizing. .case permite desplazamiento horizontal local en pantallas estrechas. margin en la salida es el total .outerWidth(true), no solo el margen.

<!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>

Salida inicial: mismo ancho CSS, distintas medidas de contenido y borde.

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 conserva width=200 en content-box; inner=280, outer=290 y margin=310.
2. border-box mantiene exterior 200: width=110, inner=190, outer=200 y margin=220. El contenido se reduce.
3. Pulse otra vez para recuperar padding 20 y la salida inicial.
4. Toggle width 200 / 200.5 aumenta cada medida 0,5. No suponga resultados enteros.
5. Reset restaura width y padding de ambas cajas sin cambiar CSS global.

Números y varios elementos

Sin argumentos, el getter mide el primer elemento coincidente. Use .each() o .map() para todos. Tras Reset, ejecute en las herramientas de desarrollo:

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

La primera línea mide solo content-box; la siguiente, ambos contenidos. Un conjunto vacío devuelve undefined en las versiones probadas 3.7.1 y 4.0.0.

200
200,150
undefined undefined undefined

Distinga ancho cero de colección vacía. Compruebe length y resultado para evitar NaN al calcular con undefined. .css("width") lleva unidades y puede concatenar en lugar de sumar. Truncar siempre con parseInt acumula errores entre elementos.

El artículo trata getters. Un argumento como .width(200) establece el ancho; omítalo para medir solamente.

Momento y límites visibles

No dependa de medidas con display:none en el elemento o sus antecesores. Mostrar temporalmente puede resultar poco fiable y costoso; mida tras una disposición real. visibility:hidden conserva el espacio. Imágenes, fuentes y contenido dinámico pueden modificar dimensiones después de estar listo el DOM.

Para límites tras transformaciones CSS, considere getBoundingClientRect(). scale(0.5) en content-box produjo .outerWidth()=250 y rectángulo=125. Rotar también cambia el rectángulo envolvente; las API no son intercambiables.

No aplique innerWidth u outerWidth de elementos normales a window o document; utilice sus .width() apropiados. Sumar márgenes no explica toda ocupación del padre ni separación entre hermanos.

Compruebe barras de desplazamiento, bordes de tabla colapsados, zoom, redondeo y cambios de disposición en el entorno real. Alternar escrituras de estilo y lecturas de dimensiones puede aumentar cálculos de layout; agrupe las operaciones necesarias.