Vergleich der Beziehung zwischen der Methode von nativem js zum Erhalten von Breite und Höhe und der Methode von jquery zum Erhalten von Breite und Höhe_Javascript-Fähigkeiten

Hinweis: 1. Da die Situation zum Erhalten der Höhe die gleiche ist wie die Situation zum Erhalten der Breite, wird im Folgenden nur die Situation zum Erhalten der Breite besprochen.
2. Die von allen unten genannten Methoden und Attributen zurückgegebenen Werte sind einheitenlos.
　3. Zur Vereinfachung der Erklärung werden die folgenden Situationen durch Abkürzungen dargestellt:

　obj -> repräsentiert das DOM-Objekt in nativem JS; repräsentiert das JQuery-Objekt in JQuery
Breite -> obj.style .width
OffsetWidth -> obj.offsetWidth
$width -> obj.width()
$innerWidth -> obj.innerWidth()
$outerWidth -> obj.outerWidth()
padding -> Stellt die Summe von padding-left und padding-right des Objekts dar
　border -> Stellt die Summe von border-left-width und border-right-width des Objekts dar

Die zugehörigen Eigenschaften von nativem JS, um die Breite zu erhalten, sind width und offsetWidth. Die Erfassungsmethode für die Breite ist obj.style.width. Sie kann nur abgerufen werden, wenn die Breite des Objekts inline festgelegt wird. Andernfalls wird eine leere Zeichenfolge zurückgegeben. Der von offsetWidth erhaltene Wert ist derselbe wie der vom Objekt in JQuery erhaltene äußere Wert. offsetWidth ist eine nicht standardmäßige, aber gut unterstützte Eigenschaft.

JQuery verfügt über drei Methoden zum Abrufen der Breite: width(), innerWidth() und äußereWidth(). Die spezifischen Verwendungsmethoden sind: obj.width(), obj.innerWidth(), obj.outerWidth(). width() ermittelt die Inhaltsbreite des Objekts, innerWidth() ermittelt die Summe aus Inhaltsbreite und Füllbreite des Objekts und äußereWidth() ermittelt die Breite einschließlich Rand, Füllbreite und Inhaltsbreite.

Die Beziehung zwischen diesen fünf Methoden ist wie folgt:

width = $width;
offsetWidth = Randauffüllbreite;
$outerWidth = Randpolsterbreite;

Diese fünf Methoden sind mit Firefox, Chrome, Opera, Safari, ie6, ie7, ie8 und ie9 kompatibel, es gibt jedoch zwei Probleme: 1. Die Breite wird unten nicht festgelegt Chrome öffnet die Seite zum ersten Mal, alle ermittelten Breiten sind falsch. Beim zweiten Öffnen entspricht das Ergebnis dem von Firefox. 2. Wenn Breite und Höhe in IE6 nicht festgelegt sind, wird die Bildlaufleiste nicht angezeigt.