ResizeObserverSize
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
Giao diện ResizeObserverSize của Resize Observer API được sử dụng bởi giao diện ResizeObserverEntry để truy cập các thuộc tính kích thước hộp của phần tử đang được quan sát.
Note:
Trong bố cục nhiều cột, là một ngữ cảnh phân mảnh, kích thước được trả về bởi ResizeObserverSize sẽ là kích thước của cột đầu tiên.
Thuộc tính phiên bản
ResizeObserverSize.blockSizeRead only-
Chiều dài của hộp viền của phần tử được quan sát theo chiều khối. Đối với các hộp có
writing-modenằm ngang, đây là chiều dọc, hay chiều cao; nếu chế độ viết là dọc, đây là chiều ngang, hay chiều rộng. ResizeObserverSize.inlineSizeRead only-
Chiều dài của hộp viền của phần tử được quan sát theo chiều nội tuyến. Đối với các hộp có
writing-modenằm ngang, đây là chiều ngang, hay chiều rộng; nếu chế độ viết là dọc, đây là chiều dọc, hay chiều cao.
Note: Để biết thêm giải thích về chế độ viết và các chiều khối và nội tuyến, hãy đọc Xử lý các hướng văn bản khác nhau.
Ví dụ
Trong ví dụ này, thuộc tính ResizeObserverEntry.contentBoxSize trả về một đối tượng ResizeObserverSize. Đây là một mảng chứa thông tin kích thước cho hộp nội dung của phần tử được quan sát.
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
console.log(entry.contentBoxSize[0]); // một ResizeObserverSize
}
});
resizeObserver.observe(divElem);
Thông số kỹ thuật
| Specification |
|---|
| Resize Observer # resizeobserversize |