GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 19/08/2020 | 00:00 GMT+7

Sử dụng getBoundClientRect để có được kích thước và vị trí của một phần tử

getBoundingClientRect , một phần của JavaScript DOM (Mô hình đối tượng tài liệu), cung cấp cho bạn những phần dữ liệu quan trọng về kích thước và vị trí của phần tử HTML .

Trong bài viết này, bạn sẽ sử dụng getBoundingClientRect để lấy kích thước và vị trí của một phần tử.

Yêu cầu

Để hoàn thành hướng dẫn này, bạn nên nắm rõ các khái niệm sau:

Hiểu getBoundingClientRect()

Để sử dụng getBoundingClientRect , trước tiên hãy tìm nạp một phần tử HTML và gọi getBoundingClientRect trên phần tử:

document.getElementById("foo").getBoundingClientRect();

getBoundingClientRect trả về một đối tượng có một số cặp khóa / giá trị cung cấp cho bạn thông tin về kích thước và vị trí của phần tử trong trang web.

Output
{   top: 450,   left: 400,   right: 825,   bottom: 500,   x: 400,     y: 450,     width: 425,   height: 50 }

Hình minh họa sau đây mô tả thông tin được trả về cho mỗi giá trị:

Ví dụ minh họa 1

Giá trị x và y sẽ tương đương với giá trị left và giá trị top . Do đó, một số trình duyệt bỏ qua x và y và chỉ trả về left và top .

Một điều nữa cần lưu ý là right / bottom có thể khác với vị trí mà bạn đã quen với việc định vị CSS, như khi định vị bằng position: absolute .

Dưới đây là minh họa cho thấy các giá trị và cách chúng liên quan đến phần tử:

Ví dụ minh họa 2

Đến đây bạn đã thấy những gì trả về getBoundingClientRect() , hãy sử dụng cùng một ví dụ để xem bạn có hiểu kết quả kết quả từ getBoundingClientRect() .

Sử dụng getBoundingClientRect trong một ứng dụng

Để sử dụng getBoundingClientRect trong mã của bạn , bạn cần một trang HTML với một phần tử bạn muốn truy vấn.

Tạo một file HTML mới có tên là boundingbox.html trong editor của bạn:

  • nano boundingbox.html`

Trong file , hãy tạo một trang HTML có chứa <div> trong <body> với id là hello “

bindingbox.html
<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>useBoundingBox example</title>   </head>   <body>     <div id="hello">Hello World</div>   </body> </html>

Khi bạn có một phần tử trên trang, bạn có thể gọi getBoundingClientRect trên phần tử #foo . Bên dưới thẻ đóng <body> , hãy thêm một <script> . Bên trong <script> , tìm nạp phần tử có id là hello và gọi getBoundingClientRect() . In kết quả ra console JavaScript:

bindingbox.html
<body>   <div id="hello">Hello World</div>    <script>   const helloElement = document.getElementById('hello');   const results = helloElement.getBoundingClientRect();   </script>  </body>

Lưu file và tải boundingbox.html trong trình duyệt của bạn.

Control panel hiển thị kết quả này:

Output
bottom: 27.199996948242188 height: 19.199996948242188 left: 8 right: 1261 top: 8 width: 1253 x: 8 y: 8

Kết quả từ phần tử #hello cho bạn biết kích thước và vị trí của phần tử đó trên trang web. Bạn có thể sử dụng thông tin này để định vị các phần tử khác liên quan đến phần tử này, tạo hiệu ứng cho các phần tử và hơn thế nữa.

Kết luận

Trong bài viết này, bạn đã thấy rằng getBoundingClientRect cung cấp một lượng dữ liệu phong phú về vị trí của một phần tử. Kể từ getBoundingClientRect là tương đối so với khung nhìn, bạn có thể thêm window.scrollY và window.scrollX giá trị vào top và left lĩnh vực để có được những yếu tố HTML của vị trí tương đối cho toàn bộ trang web.

Nó được hỗ trợ tin cậy trên tất cả các trình duyệt dành cho máy tính để bàn và thiết bị di động , với việc loại trừ các giá trị x và y không ổn định trong các version cũ hơn của Internet Explorer / Edge và Safari.

Để biết thêm thông tin chi tiết về getBoundingClientRect bạn có thể đọc thông số kỹ thuật chính thức từ Mô-đun xem mô hình đối tượng CSS (CSSOM) của W3C.

Tags:

Các tin liên quan