Unterschied zwischen offsetHeight und clientHeight

154

Was ist im Javascript-Bereich der Unterschied zwischen offsetHeight und clientHeight eines Elements?

javascript Steve
quelle
6
Hier ein gutes Demo-Beispiel jsfiddle.net/shibualexis/yVhgM/3
GibboK

Antworten:

203

clientHeight :

Gibt die Höhe des sichtbaren Bereichs für ein Objekt in Pixel zurück. Der Wert enthält die Höhe mit dem Auffüllen, jedoch nicht die Bildlaufleiste, den Rand und den Rand.

offsetHeight :

Gibt die Höhe des sichtbaren Bereichs für ein Objekt in Pixel zurück. Der Wert enthält die Höhe mit dem Abstand, der Bildlaufleiste und dem Rand, jedoch nicht den Rand.

So offsetHeightenthält Scrollbar und Grenze clientHeightnicht.

Oded
quelle
3
Eine andere Sache, die mir aufgefallen ist, ist, dass clientHeight viel schneller ist als offsetHeight. Hast du eine Idee warum?
Disc0Dancer
2
@ disc0dancer - Wahrscheinlich, weil der Browser bereits über das clientSizesofort verfügbare verfügt (schließlich ist es das Ansichtsfenster), aber offsetHeightnach dem erneuten Fließen des gesamten Dokuments rechnen muss?
Oded
Nun, der Webkit-Inspektor sagt, dass sich die Reflows auch auf das gesamte Dokument beziehen, selbst wenn er nach clientHeigh fragt.
disc0dancer
2
@ disc0dancer - Soviel zu meiner Vermutung. Dies ist jedoch eine Implementierungssache - nicht sicher, ob alle Browser so sind.
Oded
83

Die Antwort von Oded ist die Theorie. Die Theorie und die Realität sind jedoch nicht immer gleich, zumindest nicht für die Elemente <BODY> oder <HTML>, die für Bildlaufvorgänge in Javascript wichtig sein können.

Microsoft hat ein schönes Bild im MSDN :

ClientHeight, OffsetHeight, ScrollHeight

Wenn Sie eine HTML-Seite haben, die eine vertikale Bildlaufleiste zeigt, würde man erwarten, dass entweder das <BODY> - oder das <HTML> -Element einen ScrollHeight-Geater als OffsetHeight hat, wie dieses Bild zeigt. Dies gilt für alle älteren Versionen von Internet Explorer.

Dies gilt jedoch nicht für Internet Explorer 11 und nicht für Firefox 36. Zumindest in diesen Browsern ist OffsetHeight fast identisch mit ScrollHeight, was falsch ist.

Und während OffsetHeight möglicherweise falsch ist, ist ClientHeight immer korrekt.

Probieren Sie den folgenden Code in verschiedenen Browsern aus und Sie werden sehen:

<!DOCTYPE html>
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
    document.write("Body off: " + document.body.offsetHeight 
             + "<br>Body cli: " + document.body.clientHeight
             + "<br>Html off: " + document.body.parentElement.offsetHeight               
             + "<br>Html cli: " + document.body.parentElement.clientHeight);
</script>
</body>
</html>

Während älterer Internet Explorer korrekt anzeigt:

Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874

Die Ausgabe von Firefox und Internet Explorer 11 lautet:

Body off: 1260
Body cli: 1260
Html off: 1276   // this is completely wrong
Html cli: 889

was deutlich zeigt, dass offsetHeight hier falsch ist. OffsetHeight und ClientHeight sollten sich nur um wenige Pixel unterscheiden oder gleich sein.

Bitte beachten Sie, dass sich ClientHeight und OffsetHeight auch für Elemente, die nicht sichtbar sind, wie z. B. eine <FORM>, in der OffsetHeight die tatsächliche Größe des FORMULARS sein kann, während ClientHeight möglicherweise Null ist, erheblich unterscheiden können.

Elmue
quelle