ResizeObserverEntry

Thuộc tính thể hiện

ResizeObserverEntry.borderBoxSize Read only

Một mảng các đối tượng chứa kích thước border box mới của phần tử đang được quan sát khi callback chạy.

ResizeObserverEntry.contentBoxSize Read only

Một mảng các đối tượng chứa kích thước content box mới của phần tử đang được quan sát khi callback chạy.

ResizeObserverEntry.devicePixelContentBoxSize Read only

Một mảng các đối tượng chứa kích thước content box mới tính bằng điểm ảnh thiết bị của phần tử đang được quan sát khi callback chạy.

ResizeObserverEntry.contentRect Read only

Một đối tượng DOMRectReadOnly chứa kích thước mới của phần tử đang được quan sát khi callback chạy. Lưu ý rằng đây hiện là một thuộc tính cũ, chỉ còn được giữ lại trong đặc tả vì lý do tương thích ngược.

ResizeObserverEntry.target Read only

Tham chiếu đến Element hoặc SVGElement đang được quan sát.

Phương thức thể hiện

Không có.

Ví dụ

Đoạn mã sau được lấy từ ví dụ resize-observer-text.html (xem mã nguồn).

Lưu ý rằng mã này bao quát ba trường hợp tương thích khác nhau:

• Một số trình duyệt cũ có thể hỗ trợ contentRect nhưng không hỗ trợ contentBoxSize.
• Các phiên bản cũ của Firefox hỗ trợ contentBoxSize, nhưng triển khai sai nó dưới dạng một đối tượng đơn lẻ thay vì một mảng.
• Các trình duyệt hiện đại hỗ trợ contentBoxSize dưới dạng một mảng các đối tượng, để có thể báo cáo kích thước hộp cho các phần tử bị phân mảnh (ví dụ, trong tình huống nhiều cột).

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // Tiêu chuẩn biến contentBoxSize thành một mảng...
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize[0].inlineSize / 200)}rem`;
        pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize[0].inlineSize / 600)}rem`;
      } else {
        // ... nhưng các phiên bản Firefox cũ coi nó như một mục đơn lẻ
        h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize.inlineSize / 200)}rem`;
        pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize.inlineSize / 600)}rem`;
      }
    } else {
      h1Elem.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 200)}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
  console.log("Kích thước đã thay đổi");
});

resizeObserver.observe(divElem);

Thông số kỹ thuật

Tương thích trình duyệt