Chúng ta có một phần tử được minh họa như dưới đây:

Gọi phần tử trong hình minh họa là element. Giờ chúng ta sẽ nói về:

• offsetHeight, offsetWidth, offsetTop, offsetLeft, offsetParent
• clientHeight, clientWidth, clientTop, clientLeft
• scrollHeight, scrollWidth, scrollTop, scrollLeft

Quy ước margin, border, padding trên dưới (top + bottom) là y, trái phải là x.

Chúng ta sẽ tính toán giá trị của các thông số này xoay quanh kích thước border, padding, content và scrollbar.

*Height

1. offsetHeight

Khi chúng ra query element.offsetHeight, nó sẽ trả ra giá trị là chiều cao của element. Chiều cao này sẽ là border y + padding y + content height.

Trường hợp phần tử như Parent có scrollbar phía trong, offsetHeight sẽ không tính full chiều dài của phần tử con nằm ẩn phía dưới, chỉ phần nằm trong vùng nhìn thấy.

Nhưng nếu có scrollbar chiều ngang, lúc này height sẽ tính luôn độ cao của thanh scroll nếu có:

element.offsetHeight = border y + padding y + content height + horizontal scrollbar height

2. clientHeight

Khi chúng ra query element.clientHeight, nó sẽ trả ra giá trị là chiều cao của element bằng padding y + content height

Trường hợp phần tử như Parent có scrollbar phía trong, clientHeight sẽ không tính full chiều dài của phần tử con nằm ẩn phía dưới, chỉ phần nằm trong vùng nhìn thấy (tương tự như offsetHeight).

Dù có scrollbar chiều ngang, clientHeight không tính chiều cao của scrollbar này.

3. scrollHeight

Khi chúng ra query element.scrollHeight, nó sẽ trả ra giá trị là chiều cao của element bằng padding y + content height (tương tự như clientHeight).

Trường hợp phần tử như Parent có scrollbar phía trong, scrollHeight sẽ tính full chiều dài của phần tử con nằm ẩn phía dưới.

Dù có scrollbar chiều ngang, scrollHeight không tính chiều cao của scrollbar này.

*Width

1. offsetWidth

element.offsetWidth = border x + padding x + content height + vertical scrollbar width

Trường hợp overflow, tương tự như offsetHeight (không tính kích thước của phần bị ẩn).

2. clientWidth

element.clientWidth = padding x + content height

Trường hợp overflow, tương tự như clientHeight (không tính kích thước của phần bị ẩn).

3. scrollWidth

element.scrollWidth = padding x + content height

Trường hợp overflow, tương tự như scrollHeight (tính kích thước của phần bị ẩn).

offsetParent

Đây là parent (phần tử bọc ngoài) gần nhất của element nếu thỏa một trong những điều kiện sau đây:

• Có position khác static
• td, th, table

Nếu không có parents nào đủ điều kiện, offsetParent sẽ là body.

*Top

1. offsetTop

Là khoảng cách từ điểm ngoài border top element đến điểm trong border top của offsetParent.

2. clientTop

Là kích thước border-top của element.

3. scrollTop

Thuộc tính này chỉ có giá trị khi element có scrollbar (tức content bên trong bị overflow).

Giá trị của scrollTop sẽ là vị trí scrollbar khi cuộn xuống.

*Left

1. offsetLeft

Là khoảng cách từ điểm ngoài border left element đến điểm trong border left của offsetParent.

2. clientLeft

Là kích thước border-left của element.

3. scrollLeft

Tương tự như scrollTop nhưng áp dụng với scrollbar chiều ngang.

element.getBoundingClientRect()

Phương thức này trả ra các giá trị:

• width: Giống offsetWidth

• height: Giống offsetHeight

• top: Khoảng cách từ điểm ngoài top border so với top viewport

• bottom: Khoảng cách từ điểm ngoài bottom border so với top viewport

• left: Khoảng cách từ điểm ngoài left border so với left viewport

• right: Khoảng cách từ điểm ngoài right border so với left viewport

• x: Giống left

• y: Giống top

Ngoài lề

Khi chúng ta listen một mouse event, event đó sẽ có các thông số: pageX/Y, clientX/Y và screenX/Y.

1. pageX/Y

event.pageX sẽ trả ra vị trí của mouse so với điểm ngoài left border của document (html).

Tương tự với pageY.

Nếu trang có scrollbar, giá trị này vẫn tính khoảng cách điểm ngoài cùng (không nhìn thấy) khi scroll.

2. clientX/Y

event.clientX sẽ trả ra vị trí của mouse so với điểm ngoài left border của document (html).

Tương tự với clientY.

Nếu trang có scrollbar, giá trị này KHÔNG tính khoảng cách điểm ngoài cùng (không nhìn thấy) khi scroll, chỉ tính từ điểm nhìn thấy.

3. screenX/Y

event.screenX sẽ trả ra vị trí của mouse so với left viewport.

Tương tự với screenY.

Thông thường screenX/Y sẽ tương tự clientX/Y, nhưng nó sẽ khác trong các trường hợp như nhúng vào iframe.