sự khác biệt giữa offsetHeight và clientHeight

154

Trong dom javascript - sự khác biệt giữa offsetHeight và clientHeight của một phần tử là gì?

javascript

— steve
nguồn

Dưới đây là một ví dụ demo tốt jsfiddle.net/shibualexis/yVhgM/3

— GibboK

Câu trả lời:

203

clientHeight :

Trả về chiều cao của vùng hiển thị cho một đối tượng, tính bằng pixel. Giá trị chứa chiều cao với phần đệm, nhưng nó không bao gồm scrollBar, viền và lề.

offsetHeight :

Trả về chiều cao của vùng hiển thị cho một đối tượng, tính bằng pixel. Giá trị chứa chiều cao với phần đệm, scrollBar và đường viền, nhưng không bao gồm lề.

Vì vậy, offsetHeightbao gồm thanh cuộn và đường viền, clientHeightkhông.

— Oded
nguồn

Một điều nữa tôi nhận thấy là clientHeight nhanh hơn nhiều so với offsetHeight. Bạn có biết tại sao không?

— Disc0dancer

@ Disc0dancer - Có lẽ vì trình duyệt đã có clientSizesẵn (sau tất cả, đó là chế độ xem), nhưng cần tính toán offsetHeightsau khi chỉnh lại toàn bộ tài liệu?

— Oded

Vâng, thanh tra webkit nói rằng các phản xạ cũng có trên toàn bộ tài liệu, ngay cả khi yêu cầu clientHeigh.

— Disc0dancer

@ Disc0dancer - Quá nhiều cho dự đoán của tôi. Nhưng đây là một điều thực hiện - không chắc chắn tất cả các trình duyệt đều như vậy.

— Oded

Câu trả lời từ Oded là lý thuyết. Nhưng lý thuyết và thực tế không phải lúc nào cũng giống nhau, ít nhất là đối với các phần tử <BODY> hoặc <HTML> có thể quan trọng đối với các hoạt động cuộn trong javascript.

Microsoft có một hình ảnh đẹp trong MSDN :

ClientHeight, OffsetHeight, ScrollHeight

Nếu bạn có một trang HTML hiển thị thanh cuộn dọc, người ta sẽ mong đợi rằng phần tử <BODY> hoặc <HTML> có phần mềm ScrollHeight hơn OffsetHeight như hình ảnh này hiển thị. Điều này đúng với tất cả các phiên bản cũ hơn của Internet Explorer.

Nhưng điều đó không đúng với Internet Explorer 11 và không đúng với Firefox 36. Ít nhất trong các trình duyệt này, OffsetHeight gần giống với ScrollHeight, điều đó là sai.

Và trong khi OffsetHeight có thể sai, ClientHeight luôn đúng.

Hãy thử đoạn mã sau trên các trình duyệt khác nhau và bạn sẽ thấy:

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

Trong khi Internet Explorer cũ hiển thị chính xác:

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

Đầu ra từ Firefox và Internet Explorer 11 là:

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

Điều này cho thấy rõ rằng offsetHeight sai ở đây. OffsetHeight và ClientHeight chỉ khác nhau một vài pixel hoặc giống nhau.

Xin lưu ý rằng ClientHeight và OffsetHeight cũng có thể cực kỳ khác nhau đối với các yếu tố không hiển thị như ví dụ <FORM> trong đó OffsetHeight có thể là kích thước thực của FORM trong khi ClientHeight có thể bằng không.

— Elmue
nguồn