Lấy kích thước màn hình css

Và kích thước của phần tử bất kỳ.

Giới thiệu

Có một số thuộc tính mà bạn có thể sử dụng để quyết định width và height của một phần tử. Bạn sẽ cần quyết định thuộc tính nào là đúng với nhu cầu của mình. Chú ý rằng các thuộc tính này đều là read-only. Nếu bạn muốn thiết lập width và height của một phần tử, sử dụng các thuộc tính như width, height, min-width, min-height, max-width, max-height (bằng CSS hoặc JS).

Demo

offsetWidth, offsetHeight

Nếu bạn cần biết tổng số không gian mà một phần tử chiếm giữ, bao gồm chiều rộng của nội dung nhìn thấy, scrollbar (nếu có), padding, border, bạn hãy sử dụng thuộc tính offsetWidth và offsetHeight. Hầu hết các trường hợp, các giá trị này sẽ bằng với width và height của hàm getBoundingClientRect(), khi mà không có transform nào được áp dụng cho phần tử. Trong trường hợp có transform, offsetWidth và offsetHeight trả về kích thước layout của phần tử, trong khi getBoundingClientRect() trả về kích thước render. Ví dụ, một phần tử có width: 100px; transform: scale(0.5) thì offsetWidth trả về 100 còn getBoundingClientRect() trả về 50.

clientWidth, clientHeight

Nếu bạn muốn biết tổng số không gian mà nội dung hiển thị thực sự, bao gồm padding nhưng không bao gồm border, margin, scrollbar, bạn hãy sử dụng thuộc tính clientWidth và clientHeight.

scrollWidth, scrollHeight

Nếu bạn muốn kích thước thực sự của nội dung, bất kể nó nhìn thấy được bao nhiêu, hãy sử dụng thuộc tính scrollWidth và scrollHeight. Các giá trị này trả về toàn bộ kích thước của phần tử, kể cả chỉ một phần của nó là nhìn thấy do sử dụng scrollbar.

Ví dụ, nếu một phần tử 600x400 được hiển thị trong một vùng 300x300 có scrollbar, scrollWidth sẽ trả về 600 còn offsetWidth trả về 300 (cần test).

Phương thức getBoundingClientRect()

Phương thức getBoundingClientRect() trả về một đối tượng chứa các thông tin về kích thước của một phần tử và vị trí tương đối của nó so với viewport.

Giá trị trả về là một hình chữ nhật nhỏ nhất chứa toàn bộ phần tử, bao gồm padding và border. Các thuộc tính left, top, right, bottom, x, y, width, height mô tả kích thước và vị trí bằng pixel. Các thuộc tính ngoài width và height sẽ là tương đối với góc trên trái của viewport.

Hàm getComputedStyle()

Hàm getComputedStyle() trả về một đối tượng chứa các giá trị của tất cả các thuộc tính CSS của một phần tử, sau khi đã áp dụng các stylesheet.

Ghi chú

Nên sử dụng thuộc tính clientWidth của phần tử document.documentElement.

Tham khảo

Determining the dimensions of elements - Web APIs | MDN

Element.getBoundingClientRect() - Web APIs | MDN

Window.getComputedStyle() - Web APIs | MDN

HTMLElement.offsetWidth - Web APIs | MDN

Element.clientWidth - Web APIs | MDN

Element.scrollWidth - Web APIs | MDN

Element size and scrolling

Get relative mouse coordinate