Vergleich der Unterschiede zwischen verschiedenen Höhen und Spitzen in js_Grundwissen

Jedes Mal, wenn ich clientHeight(clientTop), offsetHeight(offsetTop), scrollHeight(scrollTop) in js sehe, bin ich verwirrt und kann den Unterschied zwischen ihnen nicht erkennen. Dann lohnt es sich jedoch nicht, darauf zu stoßen Sie müssen sich jedes Mal die Unterschiede ansehen, um zu entscheiden, welches Sie verwenden möchten.

Dieser Artikel basiert hauptsächlich auf Chrome. Es kann einige Unterschiede zwischen verschiedenen Browsern geben, aber viele davon sind mir nicht aufgefallen und ich werde sie aufzeichnen, wenn ich in Zukunft auf ähnliche Kompatibilitätsprobleme stoße. Hier werde ich dieses Mal die Unterschiede zwischen verschiedenen Eigenschaften im Chrome-Browser aufzeichnen, um die zukünftige Anzeige zu erleichtern

Der Unterschied zwischen clientHeight, offsetHeight und scrollHeight

ClientHeight ist in verschiedenen Browsern grundsätzlich gleich. Es wird vereinbart, dass es sich um die Höhe des sichtbaren Bereichs des Inhalts handelt, d. h. um die Höhe des Bereichs, in dem der Inhalt im Seitenbrowser sichtbar ist. Ohne Bildlaufleisten und Ränder, aber einschließlich Polsterung, d. h. der tatsächliche Wert für die Höhe des sichtbaren Bereichs des aktuellen Objekts, wie in der Abbildung unten gezeigt. clientHeight = die Höhe des sichtbaren Bereichs des Objekts (300). und niedrigere Füllwerte (20) = 320

Javascript-Lösungen, die in verschiedenen Browsern praktisch sind:

var w= document.documentElement.clientWidth || document.body.clientWidth;
var h= document.documentElement.clientHeight || document.body.clientHeight;

OffsetHeight = Höhe des Randwerts der Bildlaufleiste des aktuellen Objekts. Die Höhe des aktuellen Objekts im obigen Bild entspricht der Höhe des visuellen Bereichs, daher ist offsetHeight = 300 padding(20px) border(10px). = 330

ScrollHeight ist die tatsächliche Höhe des Webseiteninhalts, was bedeutet, dass er gleich clientHeight sein kann. Nehmen wir jedoch eine solche Situation an ist 300 Pixel und die Höhe des untergeordneten Div beträgt 500 Pixel. Zu diesem Zeitpunkt wird das Strukturdiagramm des übergeordneten Div wie folgt angezeigt:

Die scrollHeight des übergeordneten Div sollte scrollHeight = 500px Füllwert sein

Da die Bildlaufleiste zu diesem Zeitpunkt generiert wird, beträgt die Höhe des sichtbaren Bereichs des übergeordneten Divs 283, und die aktuelle Objekthöhe beträgt 300, also

clientHeight = 283px Füllwert (20px) = 303px

offsetHeight = Höhe des übergeordneten Div (300 Pixel), Füllwert (20 Pixel), Rand (10 Pixel) = 330 Pixel

<div id="parent" style="padding:10px;border:5px red solid;height:300px;width:200px;overflow:auto">
  <div style="height:500px;width:400px"></div>
</div>

Der Unterschied zwischen clientTop, offsetTop und scrollTop

Um clientTop zu verstehen, können Sie sich auf clientHeight beziehen. Die Berechnungsmethode von clientHeight ist die Höhe des aktuellen visuellen Bereichs plus dem Füllwert. Dann kann clientTop als Abstand vom aktuellen visuellen Bereich zum vorherigen Element verstanden werden.

Wie im Bild oben gezeigt, beträgt clientTop 5px. In den meisten Fällen ist clientTop dieser Grenzwert.

offsetTop ist der Abstand vom aktuellen Objekt zum Körperelement. Lassen Sie uns dies anhand der obigen Abbildung verstehen. Die Berechnung von offsetTop beginnt am Rand Die Berechnungsformel lautet wie folgt: offsetTop = margin-top des aktuellen Objekts, margin-top aller übergeordneten Elemente des aktuellen Objekts. Es sollte beachtet werden Dieser OffsetTop kann nicht direkt zugewiesen werden und kann nur über diese Berechnungsmethode ermittelt werden.

scrollTop ist der Abstand vom oberen Rand des aktuellen Objekts zum oberen Rand des aktuellen Objekts innerhalb des Anzeigebereichs des aktuellen Fensters. Das heißt, wenn eine vertikale Bildlaufleiste angezeigt wird, ist dies der Abstand, um den die Bildlaufleiste gezogen wird.

Das Obige ist ein Vergleich der Unterschiede zwischen verschiedenen Höhen und Spitzen in js. Ich hoffe, es wird für das Lernen aller hilfreich sein.