Trong DOM, sự khác biệt giữa phần tử offsetHeight
và scrollHeight
của phần tử là gì? Một hình ảnh trong lời giải thích sẽ là một trợ giúp lớn.Sự khác biệt giữa offsetHeight và scrollHeight của một phần tử trong DOM là gì?
Trả lời
HTMLElement.offsetHeight
là phép đo bao gồm đường viền phần tử, phần tử dọc đệm, thanh cuộn phần tử ngang (nếu có, nếu được hiển thị) và chiều cao CSS phần tử. HTMLElement.scrollHeight
là phép đo chiều cao của nội dung của phần tử bao gồm nội dung không hiển thị trên màn hình do tràn. Giá trị được trả về bởi HTMLElement.scrollHeight
S include bao gồm phần đệm và phần đệm phía dưới, nhưng sẽ KHÔNG bao gồm các phần tử biên giới hoặc thanh cuộn phần tử ngang.
This trang và this trang là nguồn của tôi.
Tài liệu MDN cũng cung cấp hình ảnh để minh họa.
Như @Csarsam đã nói, chiều cao chênh lệch là chiều cao hộp biên giới (Tôi đang viết lại). Chiều cao cuộn, là chiều cao của nội dung có thể cuộn, thường bao gồm nhiều phần tử. Nhưng chiều cao cuộn nó cũng được xác định trên các phần tử không cuộn, do đó không có nội dung cuộn được, trong trường hợp này (tôi đã kiểm tra nhưng không có tham chiếu để sao lưu) chiều cao cuộn là chiều cao nội dung, nghĩa là, không bao gồm lề và đường viền. Nhưng khi phần tử này là một phần của nội dung có thể cuộn, thì phần tử của nó được tính đến để tính toán chiều cao cuộn của phần tử gốc.
Chiều cao cuộn được xác định trên cả nội dung có thể cuộn và nội dung không thể cuộn, đó là điều có thể gây nhầm lẫn.
Cập nhật
Đây là một tài liệu tham khảo trong đó khẳng định những gì tôi đã kiểm tra: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
- 1. Sự khác biệt giữa offsetHeight và clientHeight
- 2. Sự khác biệt giữa DOM và bóng mờ DOM của Polymer là gì?
- 3. sự khác biệt giữa ngSwitch và ngInclude là gì?
- 4. Sự khác biệt giữa HTML và DOM
- 5. Sự khác biệt giữa phần .got và .got.plt là gì?
- 6. Sự khác biệt giữa chế độ đóng gói DOM đóng mở và đóng là gì?
- 7. sự khác biệt giữa window.element và nguyên tố là gì khi truy cập DOM yếu tố
- 8. sự khác biệt giữa/* ... */và là gì/** ... */
- 9. Sự khác biệt giữa & và && trong MATLAB là gì?
- 10. Sự khác biệt giữa node.isSameNode (node1) và node === node1 trong DOM là gì?
- 11. Sự khác biệt giữa nguyên tử trong Lisp thường và nguyên tử trong Clojure là gì?
- 12. Sự khác biệt giữa '&' và ',' trong Generics Java là gì?
- 13. Sự khác biệt giữa + và toán tử của VBScript là gì?
- 14. Trong Ember.js, sự khác biệt giữa [] và Ember.A ([]) là gì?
- 15. Thuật ngữ: Sự khác biệt giữa một lớp học và một thành phần là gì?
- 16. Sự khác biệt giữa cây DOM trình duyệt và kết xuất cây là gì
- 17. là gì sự khác biệt giữa SQL_Latin1_General_CP1_CI_AS và SQL_Latin1_General_CP1_CI_AI
- 18. Sự khác biệt giữa phần mở rộng và plugin của Firefox là gì?
- 19. Sự khác biệt giữa -anydpi và -nodpi là gì?
- 20. Sự khác biệt giữa tính đơn điệu và sự chấp nhận của một heuristic là gì?
- 21. Sự khác biệt giữa nguyên tử và biểu tượng trong Lisp thường là gì?
- 22. Sự khác biệt giữa người trợ giúp và một phần là gì?
- 23. Sự khác biệt giữa thành phần React và cá thể thành phần React là gì?
- 24. Sự khác biệt giữa formControlName và FormControl là gì?
- 25. Sự khác biệt giữa sự phù hợp từng phần và khởi đầu ấm áp là gì?
- 26. Sự khác biệt giữa đúc và co giật là gì?
- 27. Sự khác biệt giữa tính năng và nhãn là gì?
- 28. Sự khác biệt giữa <> và! = Toán tử trong MySQL là gì?
- 29. Sự khác biệt giữa mixin và thừa kế là gì?
- 30. Sự khác biệt giữa đóng và mô-đun là gì?
Tuyệt vời Câu trả lời là ở đây ... http://stackoverflow.com/questions/4106538/difference-between-offsetheight- và-clientheight –
Trên thực tế @HumanBeing đó là về một cặp khác nhau của các yếu tố. – Dave