Clientheight là gì

Có một bài viết hay về MDN lý giải kim chỉ nan đằng sau những khái niệm đó : //developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elementsNó cũng lý giải sự độc lạ về khái niệm quan trọng giữa chiều rộng / chiều cao của ràng buộc so với offsetWidth / offsetHeight .Sau đó, để chứng tỏ kim chỉ nan đúng hay sai, bạn cần một số ít bài kiểm tra. Đó là những gì tôi đã làm ở đây : //github.com/lingtalfi/dimensions-chcoateet

Đó là thử nghiệm cho chrome53, ff49, safari9, edge13 và eg11.

Kết quả của những bài kiểm tra chứng tỏ rằng triết lý nói chung là đúng. Đối với những bài kiểm tra, tôi đã tạo ra 3 div chứa 10 đoạn ipsum mỗi đoạn. Một số css đã được vận dụng cho họ :

box

Xem thêm: Tại sao gan là cơ quan tuyệt vời nhất trong cơ thể?

Và đây là tác dụng :

• div1
  • offsetWidth: 530 [chrome53, ff49, safari9, edge13, eg11]
  • offsetHeight: 330 [chrome53, ff49, safari9, edge13, eg11]
  • bcr. thong: 530 [chrome53, ff49, safari9, edge13, eg11]
  • bcr.height : 330 [ chrome53, ff49, safari9, edge13, eg11 ]
  • clientWidth : 505 [ chrome53, ff49, safari9 ]
  • clientWidth: 508 [cạnh13]
  • clientWidth: 503 [tức là 11]
  • clientHeight : 320 [ chrome53, ff49, safari9, edge13, eg11 ]
  • scrollWidth : 505 [ chrome53, safari9, ff49 ]
  • scrollWidth: 508 [cạnh13]
  • scrollWidth: 503 [tức là 11]
  • cuộnHeight: 916 [chrome53, safari9]
  • cuộnHeight: 954 [ff49]
  • scrollHeight: 922 [edge13, eg11]
• div2
  • offsetWidth: 500 [chrome53, ff49, safari9, edge13, eg11]
  • offsetHeight: 300 [chrome53, ff49, safari9, edge13, eg11]
  • bcr. thong: 500 [chrome53, ff49, safari9, edge13, eg11]
  • bcr.height: 300 [chrome53, ff49, safari9]
  • bcr.height: 299.9999694824219 [cạnh13, tức là 11]
  • clientWidth: 475 [chrome53, ff49, safari9]
  • clientWidth: 478 [cạnh13]
  • clientWidth: 473 [tức là 11]
  • clientHeight : 290 [ chrome53, ff49, safari9, edge13, eg11 ]
  • scrollWidth : 475 [ chrome53, safari9, ff49 ]
  • scrollWidth: 478 [cạnh13]
  • scrollWidth: 473 [tức là 11]
  • cuộnHeight: 916 [chrome53, safari9]
  • cuộnHeight: 954 [ff49]
  • scrollHeight: 922 [edge13, eg11]
• div3
  • offsetWidth: 530 [chrome53, ff49, safari9, edge13, eg11]
  • offsetHeight: 330 [chrome53, ff49, safari9, edge13, eg11]
  • bcr. thong: 265 [chrome53, ff49, safari9, edge13, eg11]
  • bcr.height: 165 [chrome53, ff49, safari9, edge13, eg11]
  • clientWidth: 505 [chrome53, ff49, safari9]
  • clientWidth: 508 [cạnh13]
  • clientWidth: 503 [tức là 11]
  • clientHeight : 320 [ chrome53, ff49, safari9, edge13, eg11 ]
  • scrollWidth : 505 [ chrome53, safari9, ff49 ]
  • scrollWidth: 508 [cạnh13]
  • scrollWidth: 503 [tức là 11]
  • cuộnHeight: 916 [chrome53, safari9]
  • cuộnHeight: 954 [ff49]
  • scrollHeight: 922 [edge13, eg11]

Vì vậy, ngoài giá trị độ cao của ràng buộc [ 299.9999694824219 thay vì 300 dự kiến ] ở cạnh13 và eg11, hiệu quả xác nhận rằng triết lý đằng sau điều này hoạt động giải trí .Từ đó, đây là định nghĩa của tôi về những khái niệm đó :

• offsetWidth / offsetHeight: kích thước của hộp viền bố trí
• ràng buộcClientRect: kích thước của hộp viền kết xuất
• clientWidth / clientHeight: kích thước của phần hiển thị của hộp đệm bố cục [không bao gồm các thanh cuộn]
• scrollWidth / scrollHeight: kích thước của hộp đệm bố cục nếu nó không bị ràng buộc bởi các thanh cuộn

Lưu ý : chiều rộng của thanh cuộn dọc mặc định là 12 px ở edge13, 15 px ở chrome53, ff49 và safari9 và 17 px ở eg11 [ được thực thi bằng những phép đo trong photoshop từ ảnh chụp màn hình hiển thị và được chứng tỏ ngay bằng hiệu quả của những thử nghiệm ] .Tuy nhiên, trong 1 số ít trường hợp, hoàn toàn có thể ứng dụng của bạn không sử dụng chiều rộng của thanh cuộn dọc mặc định .Vì vậy, với những định nghĩa về những khái niệm đó, chiều rộng của thanh cuộn dọc phải bằng [ trong mã giả ] :

• kích thước bố cục: offsetWidth – clientWidth – [BorderLeftWidth + BorderRightWidth]

  Xem thêm: Hoại thư Fournier

• kích cỡ kết xuất : ràng buộcClientRect. thong – clientWidth – [ BorderLeftWidth + BorderRightWidth ]

Lưu ý, nếu bạn không hiểu bố cục tổng quan so với kết xuất, sung sướng đọc bài viết mDN .Ngoài ra, nếu bạn có một trình duyệt khác [ hoặc nếu bạn muốn xem tác dụng của những bài kiểm tra ], bạn hoàn toàn có thể xem trang thử nghiệm của tôi ở đây : //codepen.io/lingtalfi/pen/BLdBdL

To know the difference you have to understand the box model, but basically:

clientHeight:

returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin

offsetHeight:

is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar [if present, if rendered] and the element CSS height.

scrollHeight:

is a measurement of the height of an element's content including content not visible on the screen due to overflow

I will make it easier:

Consider:

scrollHeight: ENTIRE content & padding [visible or not]
Height of all content + paddings, despite of height of the element.

clientHeight: VISIBLE content & padding
Only visible height: content portion limited by explicitly defined height of the element.

offsetHeight: VISIBLE content & padding + border + scrollbar
Height occupied by the element on document.

Get the height and width of "myDIV", including padding:

const element = document.getElementById["myDIV"]; let text = "clientHeight: " + element.clientHeight + "px
";

text += "clientWidth: " + element.clientWidth + "px";

More examples below.

The clientHeight property returns the viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.

The clientHeight property is read-only.

Syntax

Return Value

The difference between clientHeight/clientWidth and offsetHeight/offsetWidth

Without a scrollbar:

const element = document.getElementById["myDIV"]; let text = ""; text += "clientHeight: " + element.clientHeight + "px
"; text += "offsetHeight: " + element.offsetHeight + "px
"; text += "clientWidth: " + element.clientWidth + "px
";

text += "offsetWidth: " + element.offsetWidth + "px";

With a scrollbar:

const element = document.getElementById["myDIV"]; let text = ""; text += "clientHeight: " + element.clientHeight + "px
"; text += "offsetHeight: " + element.offsetHeight + "px
"; text += "clientWidth: " + element.clientWidth + "px
";

text += "offsetWidth: " + element.offsetWidth + "px";

Browser Support

element.clientHeight is supported in all browsers:

Thứ tư, 24/07/2019 | 00:00 GMT+7

Sử dụng clientWidth và clientHeight bạn có thể nhận được kích thước pixel của một phần tử HTML. Kích thước được tính toán bằng cách sử dụng kích thước của nội dung bên trong phần tử HTML, cùng với phần đệm.

Lưu ý : Đường viền, lề hoặc thanh cuộn [nếu có] bị loại trừ khi tính toán clientWidth và clientHeight

Sử dụng clientWidth và clientHeight

Bài tập học tập

Như một bài tập, hãy thử tính giá trị của clientWidth và clientHeight của phần tử HTML sau: