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
Chiều rộng và chiều cao box với thuộc tính width và height
Tùy thuộc vào thuộc tính box-resize của phần tử, mà thuộc tính with và height tương ứng với chiều rộng cao của phần tử hay chiều rộng cao của phần content của phần tử.
- Nếu box-resize có giá trị content-box:
Thì thuộc tính width và height là chiều rộng và cao của riêng phần content [không gồm padding, border, margin]. - Nếu box-resize có giá trị border-box:
Thì thuộc tính width và height là tổng chiều rộng và tổng cao của phần tử [gồm content, padding, border, margin].
Cú pháp:
width: | | auto; height: | | auto;
Chiều rộng width và cao height có thể nhận giá trị là chiều dài [tham khảo đơn vị chiều dài CSS ], phần trăm [chiếm bao nhiêu phần trăm không gian của phần tử chứa] hoặc auto do browser tính toán trên cơ sở dàn phần tử theo quy tắc mặc định.
Ví dụ 1] Thiết lập chiều rộng 190px
và cao là 90px
, khi box-sizing là border-box và content-box [mặc định]
.exam1 { box-sizing: border-box; border: 5px solid green; width: 190px; height: 120px; } .exam2 { box-sizing: content-box; border: 5px solid red; width: 190px; height: 120px; }Phần tử này có tổng chiều cao là 120px và tổng chiều rộng là 190px.Phần tử này có tổng chiều cao là 130px và tổng chiều rộng là 200px.
Phần tử này có tổng chiều cao là 120px và tổng chiều rộng là 190px.
Phần tử này có tổng chiều cao là 130px và tổng chiều rộng là 200px.
Xem lại phần về BOX CSS để biết xác định chiều cao, chiều rộng thực tế của box khi vẽ trong HTML
width và height với giá trị phần trăm
Thuộc tính width
và height
có thể được thiết lập bằng đơn vị phần trăm %
, cho biết kích thước chiếm bao nhiều % phần content
của phần tử cha. Ví dụ sau chiều rộng theo phần trăm, chiều cao lại theo px
.contain-element { box-sizing: border-box; height: 220px; width: 420px; border: 10px solid green; } .test-element { box-sizing: border-box; border: 1px solid red; width: 50%; height: 100px; }Tổng chiều rộng là 50% của phần content phần tử cha = 200px; và chiều cao là 100px .
Tổng chiều rộng là 50% của phần content phần tử cha = 200px; và chiều cao là 100px .
Chiều rộng, chiều cao lớn nhất nhỏ nhất
Thiết lập chiều rộng và cao lớn nhất và nhỏ nhất của phần tử [tức là phần tử tự co gian theo nội dung trong kích thước lớn nhất và nhỏ nhât].
- min-width - độ rộng nhỏ nhất
- min-height - chiều cao nhỏ
- max-width - độ rộng lớn nhất
- max-height - chiều cao lớn nhất
p.first { border: 5px solid green; min-height: 100px; } p.second { border: 5px solid green; max-width: 100px; }The minimum height of this paragraph is set to 100px.
The maximum width of this paragraph is set to 100px.
The minimum height of this paragraph is set to 100px.
The maximum width of this paragraph is set to 100px.