jQuery-Dimensionen: Was ist der Unterschied zwischen „width', „innerWidth', „outerWidth', „height', „innerHeight' und „outerHeight'?

jQuery: Den Unterschied zwischen Breite, innerWidth, äußerer Breite, Höhe, innerer Höhe und äußerer Höhe verstehen

Beim Arbeiten mit Dimensionen in jQuery ist es so Es ist wichtig, die subtilen Unterschiede zwischen width, innerWidth, externalWidth, height, innerHeight und externalHeight zu verstehen. Obwohl sie auf den ersten Blick austauschbar erscheinen mögen, erfüllt jede dieser Eigenschaften einen bestimmten Zweck.

Breite und Höhe

Breite und Höhe stellen die sichtbaren Abmessungen eines Elements dar. einschließlich Inhalt und Polsterung. In Ihrem Beispiel geben diese Eigenschaften 200 Pixel bzw. 150 Pixel zurück, da Sie das Element mit diesen Abmessungen mithilfe von CSS definiert haben.

innerWidth und innerHeight

innerWidth und innerHeight darstellen die Abmessungen des Inhaltsbereichs eines Elements, ohne die Polsterung. Da Sie in Ihrem Beispiel keine Auffüllung auf das Element angewendet haben, geben diese Eigenschaften auch 200 Pixel und 150 Pixel zurück und liefern die gleichen Ergebnisse wie Breite und Höhe.

outerWidth und äußereHeight

OuterWidth und OuterHeight stellen die Gesamtabmessungen eines Elements dar, einschließlich seines Inhalts, seiner Polsterung und seines Randes. Für Ihr Element enthalten diese Eigenschaften keinen Rahmen, daher geben sie dieselben Werte wie Breite und Höhe zurück.

Beispiele

Um die Unterschiede weiter zu veranschaulichen, fügen wir hinzu etwas Polsterung und Rand für das Element in Ihrem Beispiel:

.test {
  padding: 20px;
  border: 10px solid red;
}

Nun wären die Breite und Höhe des Elements (einschließlich Inhalt und Polsterung) so 240px bzw. 190px, innerWidth und innerHeight (nur Inhaltsbereich) wären 200px und 150px, und äußereWidth und äußereHeight (Gesamtabmessungen einschließlich Rand) wären 260px und 210px.

Fazit

Entwickler können die Unterschiede zwischen diesen Dimensionseigenschaften verstehen um Elemente auf einer Webseite genau zu berechnen und zu positionieren.

Das obige ist der detaillierte Inhalt vonjQuery-Dimensionen: Was ist der Unterschied zwischen „width', „innerWidth', „outerWidth', „height', „innerHeight' und „outerHeight'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!