Was ist der Unterschied zwischen width, innerWidth und outerWidth, height, innerHeight und outerHeight in jQuery?

Ich habe ein Beispiel geschrieben, um zu sehen, was der Unterschied ist, aber sie zeigen mir dieselben Ergebnisse für Breite und Höhe.

    $(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 });   .test { width: 200px; height: 150px; background: black; }    

In diesem Beispiel sehen Sie, dass sie dieselben Ergebnisse ausgeben. Wenn jemand weiß, was der Unterschied ist, zeigen Sie mir bitte entsprechende Antwort.

Vielen Dank.

Hast du diese Beispiele gesehen? Sieht ähnlich wie deine Frage aus.

Arbeiten mit Breiten und Höhen

Bildbeschreibung hier eingeben

jQuery – Dimensionen

jQuery: Höhe, Breite, innere und äußere

Wie in einem Kommentar erwähnt, erfahren Sie in der Dokumentation genau, was die Unterschiede sind. Aber zusammenfassend:

  • innerWidth / innerHeight – enthält Padding, aber keinen Rahmen
  • outerWidth / outerHeight – enthält Auffüllung, Rahmen und optional Rand
  • Höhe / Breite – Elementhöhe (keine Polsterung, kein Rand, keine Umrandung)
  • width = bekomme die Breite,

  • innerWidth = get Breite + Polsterung,

  • outerWidth = Breite + Füllung + Rand und optional den Rand erhalten

Wenn Sie testen möchten, fügen Sie Ihren Testklassen einige Abstände, Ränder und Rahmen hinzu und versuchen Sie es erneut.

Lesen Sie auch in den jQuery-Dokumenten … Alles, was Sie brauchen, ist ziemlich viel da

Es scheint notwendig zu sein, über die Wertezuweisungen zu erzählen und über die Bedeutung des “width” -Parameters in jq zu vergleichen: (angenommen, dass new_value in px unit definiert ist)

 jqElement.css('width',new_value); jqElement.css({'width: ;'}); getElementById('element').style.width= new_value; 

Die drei Befehle haben nicht denselben Effekt: weil der erste jquery-Befehl die innere Breite des Elements definiert und nicht die “Breite”. Das ist schwierig.

Um denselben Effekt zu erhalten, müssen Sie vorher die Paddings berechnen (nehmen wir an, dass var Pads ist), die richtige statement für jquery, um dasselbe Ergebnis wie pure js (oder css-Parameter ‘width’) zu erhalten:

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

Wir können auch folgendes feststellen:

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

w1 ist die innere Breite, w2 ist die Breite (css-Attributbedeutung) Differenz, die nicht in der JQ-API-Dokumentation dokumentiert ist.

Freundliche Grüße

Dreifach


Hinweis: Meiner Meinung nach kann dies als Bug JQ 1.12.4 betrachtet werden. Der Weg, um auszugehen, sollte darin bestehen, definitiv eine Liste von akzeptierten Parametern für .css (‘Parameter’, Wert) einzuführen, weil hinter ‘Parametern’ verschiedene Bedeutungen stehen. akzeptiert, die Interesse haben, aber immer klar sein müssen. Für diesen Fall bedeutet “innere Breite” nicht dasselbe wie “Breite”. Wir finden eine Spur dieses Problems in der Dokumentation von .width (value) mit dem Satz: “Beachten Sie, dass die CSS-width-Eigenschaft in modernen Browsern kein Padding enthält”