jQuery / width, innerWidth und outerWidth vergleichen

.width() misst in jQuery den Inhalt, .innerWidth() zusätzlich horizontales Padding und .outerWidth() auch horizontale Rahmen. .outerWidth(true) schließt Außenabstände ein. Die Ergebnisse sind Pixelzahlen, keine CSS-Zeichenfolgen.

Die benötigte Grenze wählen

Das CSS-Boxmodell ordnet Padding, Rahmen und Margin um den Inhalt an. Wählen Sie die benötigte Grenze; eine größere Zahl ist nicht automatisch genauer.

Die Werte gelten für CSS width 200px, Padding je 20px, Rahmen je 5px und Margin je 10px. .width() misst auch bei border-box den Inhalt; .innerWidth() und .outerWidth() ergänzen ihre Grenzen.

Bei box-sizing content-box ergibt sich außen 200+40+10=250. Bei border-box passen Padding und Rahmen in CSS 200; Inhalt bleibt 150. Die Bedeutung von .width() bleibt gleich, die CSS-Zuweisung meint eine andere Grenze.

Vollständiges Vergleichsbeispiel

Speichern Sie alles als UTF-8 width-demo.html und öffnen Sie es im Browser. Internet lädt die offizielle jQuery-Datei 4.0.0. Kein Server und keine Installation sind nötig. Anfangswerte, Padding-Änderung samt Rückkehr und Bruchbreiten wurden in Windows Edge mit 3.7.1 und 4.0.0 ausgeführt.

Die Startbedingungen unterscheiden sich nur in box-sizing. .case erlaubt lokales horizontales Scrollen auf schmalen Bildschirmen. margin in der Ausgabe ist der Gesamtwert .outerWidth(true), nicht nur der Abstand.

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

Anfangsausgabe: gleiche CSS-Breiten, unterschiedliche Inhalts- und Rahmenmaße.

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 lässt content-box bei width=200; inner=280, outer=290, margin=310.
2. border-box behält außen 200: width=110, inner=190, outer=200, margin=220. Der Inhalt schrumpft.
3. Erneut drücken stellt Padding 20 und die Anfangsausgabe her.
4. Toggle width 200 / 200.5 erhöht alle Maße um 0,5. Ganzzahlen sind nicht garantiert.
5. Reset stellt width und Padding beider Boxen wieder her, ohne globale CSS-Änderung.

Zahlen und mehrere Elemente

Getter ohne Argument messen das erste passende Element. Verwenden Sie .each() oder .map() für alle. Nach Reset in den Entwicklertools ausführen:

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

Die erste Zeile misst nur content-box, die zweite beide Inhalte. Leere Mengen liefern in den geprüften 3.7.1 und 4.0.0 undefined.

200
200,150
undefined undefined undefined

Unterscheiden Sie echte Nullbreite von leerer Auswahl. Prüfen Sie length und Rückgabewert gegen NaN durch Rechnen mit undefined. .css("width") enthält Einheiten und kann statt Addition eine Verkettung bewirken. Ständiges Abschneiden mit parseInt summiert Rundungsfehler.

Hier geht es um Getter. Ein Argument wie .width(200) setzt die Breite; beim bloßen Lesen bleibt es weg.

Zeitpunkt und sichtbare Grenzen

Verlassen Sie sich nicht auf Maße bei display:none am Element oder Vorfahren. Vorübergehendes Anzeigen kann unzuverlässig und teuer sein; messen Sie nach realer Anordnung. visibility:hidden erhält hingegen das Layout. Bilder, Schriften und dynamische Inhalte können es nach DOM-Bereitschaft verändern.

Für Grenzen nach CSS-Transformationen prüfen Sie getBoundingClientRect(). Mit scale(0.5) an content-box ergaben sich .outerWidth()=250 und Rechteckbreite=125. Rotation verändert ebenfalls das umschließende Rechteck; die APIs sind nicht austauschbar.

innerWidth und outerWidth für gewöhnliche Elemente gelten nicht für window oder document; verwenden Sie passende .width()-Messungen. Eine Summe mit Margin erklärt nicht jede Anordnung oder jeden Abstand zwischen Nachbarn.

Prüfen Sie Scrollleisten, zusammenfallende Tabellenrahmen, Zoom, Rundung und wechselndes Layout im Einsatz. Abwechselndes Schreiben von Stilen und Lesen von Maßen kann häufige Layoutberechnung auslösen; bündeln Sie nötige Änderungen und Lesezugriffe.