różnica między offsetHeight i clientHeight

154

W javascript dom - jaka jest różnica między offsetHeight a clientHeight elementu?

javascript

— steve
źródło

Tutaj dobry przykład demo jsfiddle.net/shibualexis/yVhgM/3

— GibboK

Odpowiedzi:

203

clientHeight :

Zwraca wysokość widocznego obszaru dla obiektu w pikselach. Wartość zawiera wysokość z wypełnieniem, ale nie obejmuje scrollBar, obramowania i marginesu.

offsetHeight :

Zwraca wysokość widocznego obszaru dla obiektu w pikselach. Wartość zawiera wysokość z dopełnieniem, scrollBar i obramowanie, ale nie zawiera marginesu.

Tak więc offsetHeightobejmuje pasek przewijania i obramowanie, clientHeightnie.

— Oded
źródło

Zauważyłem również, że clientHeight jest znacznie szybszy niż offsetHeight. Czy masz pojęcie, dlaczego?

— disc0dancer

@ disc0dancer - Pewnie dlatego, że przeglądarka ma już clientSizełatwo dostępne (w końcu to jest to viewport), ale trzeba wyliczyć offsetHeightpo przepełnieniu całego dokumentu?

— Oded

Cóż, inspektor webkitów mówi, że przepływy są również w całym dokumencie, nawet gdy prosi o clientHeigh.

— disc0dancer

@ disc0dancer - To tyle, jeśli chodzi o moje przypuszczenie. Ale to kwestia implementacji - nie jestem pewien, czy wszystkie przeglądarki są takie.

— Oded

Odpowiedzią Odeda jest teoria. Ale teoria i rzeczywistość nie zawsze są takie same, przynajmniej nie w przypadku elementów <BODY> lub <HTML>, które mogą być ważne dla operacji przewijania w javascript.

Microsoft ma ładny obraz w MSDN :

ClientHeight, OffsetHeight, ScrollHeight

Jeśli masz stronę HTML, która pokazuje pionowy pasek przewijania, można by się spodziewać, że element <BODY> lub <HTML> ma ScrollHeight większy niż OffsetHeight, jak pokazuje ten obraz. Dotyczy to wszystkich starszych wersji przeglądarki Internet Explorer.

Ale nie jest to prawdą w przypadku przeglądarki Internet Explorer 11, a nie przeglądarki Firefox 36. Przynajmniej w tych przeglądarkach OffsetHeight jest prawie taki sam jak ScrollHeight, co jest błędne.

I chociaż OffsetHeight może być błędny, ClientHeight jest zawsze poprawny.

Wypróbuj poniższy kod w różnych przeglądarkach, a zobaczysz:

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

Podczas gdy starszy Internet Explorer wyświetla się poprawnie:

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

Dane wyjściowe z przeglądarek Firefox i Internet Explorer 11 to:

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

co wyraźnie pokazuje, że offsetHeight jest tutaj błędny. OffsetHeight i ClientHeight powinny różnić się tylko o kilka pikseli lub być takie same.

Należy pamiętać, że ClientHeight i OffsetHeight mogą się również znacznie różnić w przypadku elementów, które nie są widoczne, na przykład <FORM>, gdzie OffsetHeight może być rzeczywistym rozmiarem FORMULARZA, podczas gdy ClientHeight może wynosić zero.

— Elmue
źródło