Was ist der Unterschied zwischen jQuerys „width', „innerWidth', „outerWidth', „height', „innerHeight' und „outerHeight'?

Dimensionseigenschaften von jQuery: width, innerWidth, OuterWidth, height, InnerHeight, OuterHeight

Die jQuery-Bibliothek bietet verschiedene Eigenschaften zum Bearbeiten und Abrufen der Abmessungen von HTML-Elementen. Zu diesen Eigenschaften gehören „Width“, „InnerWidth“, „OuterWidth“, „Height“, „InnerHeight“ und „OuterHeight“. Das Verständnis ihrer Unterschiede ist entscheidend für die genaue Kontrolle der Elementgröße.

width und height vs. innerWidth und innerHeight

Die Eigenschaften width und height stellen die Gesamtabmessungen eines Elements dar , einschließlich seines Inhalts und seiner Auffüllung, jedoch ohne seine Ränder und Bildlaufleisten. innerWidth und innerHeight hingegen schließen das Auffüllen aus und stellen die Abmessungen des Inhaltsbereichs innerhalb des Elements dar.

outerWidth und äußereHeight

outerWidth und äußereHeight umfassen alles darin das Element, einschließlich seines Inhalts, seiner Abstände, Rahmen und Bildlaufleisten. Dadurch können Sie den gesamten Platz, den ein Element auf der Seite einnimmt, auch bei variablen Rändern und Rändern genau bestimmen.

Beispiel

Bedenken Sie den folgenden HTML-Code:

<div class="test">
  <p>Hello World!</p>
</div>

.test {
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #000;
}

Mit jQuery können wir die Dimensionen von „.test“ abrufen. div:

var myDiv = $('.test');
var width = myDiv.width(); // 220px (width + padding + border)
var innerWidth = myDiv.innerWidth(); // 200px (width + padding)
var outerWidth = myDiv.outerWidth(); // 222px (width + padding + border + margin)

var height = myDiv.height(); // 170px (height + padding + border)
var innerHeight = myDiv.innerHeight(); // 150px (height + padding)
var outerHeight = myDiv.outerHeight(); // 172px (height + padding + border + margin)

Wie Sie sehen können, bieten die Eigenschaften „width“, „height“, „innerWidth“, „innerHeight“, „outerWidth“ und „outerHeight“ unterschiedliche Granularitätsstufen bei den Abmessungen des Messelements und ermöglichen so Flexibilität und präzise Kontrolle über das Layout und Aussehen Ihrer Webseiten.

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