javascript - skillnaden mellan offsetHeight och clientHeight

I JavaScript DOM - vad är skillnaden mellan offsetHeight och clientHeight för ett element?

Svar #1

klienthöjd:

Returnerar höjden på det synliga området för ett objekt, i pixlar. Värdet innehåller höjden med padding, men inkluderar inte rullningslisten, kanten eller marginalen.

offsetHeight:

Returnerar höjden på det synliga området för ett objekt, i pixlar. Värdet innehåller höjden med padding, rullningsfält och kant, men inkluderar inte marginalen.

Så, offsetHeight inkluderar rullningslist och kant, clientHeight gör det inte.

Svar #2

Svaret från Oded är teorin. Men teorin och verkligheten är inte alltid samma, åtminstone inte för <BODY> eller <HTML>-elementen som kan vara viktiga för rullningsoperationer i javascript.

Microsoft har en fin bild på MSDN:

Om du har en HTML-sida som visar en vertikal rullningslist skulle man förvänta sig att antingen <BODY>- eller <HTML>-elementet har en ScrollHeight som är större än OffsetHeight, som denna bild visar. Detta är sant för alla äldre versioner av Internet Explorer.

Men det är inte sant för Internet Explorer 11 och inte för Firefox 36. Åtminstone i dessa webbläsare är OffsetHeight nästan samma som ScrollHeight, vilket är fel.

Och medan OffsetHeight kan vara fel, är ClientHeight alltid korrekt.

Test följande kod på olika webbläsare så kommer du att se:

<!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>

Medan äldre Internet Explorer visar korrekt:

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

Utdata från Firefox och Internet Explorer 11 är:

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

vilket tydligt visar att offsetHeight är fel här. OffsetHeight och ClientHeight bör skilja sig med bara några få pixlar eller vara samma.

Observera att ClientHeight och OffsetHeight också kan skilja sig extremt för element som inte är synliga, till exempel ett <FORM> där OffsetHeight kan vara den verkliga storleken på FORM medan ClientHeight kan vara noll.

Relaterade artiklar