Xác định kích thước của phần tử
Có nhiều thuộc tính bạn có thể xem để xác định chiều rộng và chiều cao của phần tử, và việc chọn đúng thuộc tính cho nhu cầu của bạn có thể khá khó. Bài viết này được thiết kế để giúp bạn đưa ra quyết định đó. Lưu ý rằng tất cả các thuộc tính này đều chỉ đọc. Nếu bạn muốn đặt chiều rộng và chiều cao của một phần tử, hãy dùng width và height hoặc các thuộc tính ghi đè min-width và max-width, cùng min-height và max-height.
Nó chiếm bao nhiêu không gian?
Nếu bạn cần biết tổng không gian mà một phần tử chiếm, bao gồm chiều rộng của nội dung hiển thị, thanh cuộn (nếu có), padding và border, hãy dùng các thuộc tính HTMLElement.offsetWidth và HTMLElement.offsetHeight. Phần lớn thời gian, chúng giống với chiều rộng và chiều cao của Element.getBoundingClientRect() khi không có biến đổi nào được áp dụng cho phần tử. Trong trường hợp có biến đổi, offsetWidth và offsetHeight trả về chiều rộng và chiều cao bố cục của phần tử, còn getBoundingClientRect() trả về chiều rộng và chiều cao hiển thị. Ví dụ, nếu phần tử có width: 100px; và transform: scale(0.5); thì getBoundingClientRect() sẽ trả về 50 cho chiều rộng, trong khi offsetWidth sẽ trả về 100. Một khác biệt nữa là offsetWidth và offsetHeight làm tròn giá trị thành số nguyên, trong khi getBoundingClientRect() cung cấp các giá trị thập phân chính xác hơn.
Kích thước của nội dung hiển thị là bao nhiêu?
Nếu bạn cần biết nội dung hiển thị thực tế chiếm bao nhiêu không gian, bao gồm padding nhưng không gồm border, margin, hay thanh cuộn, hãy dùng các thuộc tính Element.clientWidth và Element.clientHeight:
Nội dung lớn đến mức nào?
Nếu bạn cần biết kích thước thực sự của nội dung, bất kể hiện tại nó đang hiển thị bao nhiêu phần, bạn cần dùng các thuộc tính Element.scrollWidth và Element.scrollHeight. Chúng trả về chiều rộng và chiều cao của toàn bộ nội dung của phần tử, ngay cả khi chỉ một phần đang hiển thị do có thanh cuộn.
Ví dụ, nếu một phần tử 600x400 pixel đang được hiển thị bên trong một vùng cuộn 300x300 pixel, scrollWidth sẽ trả về 600 còn scrollHeight sẽ trả về 400.