ResizeObserverEntry: thuộc tính target

Giá trị

Một Element hoặc SVGElement biểu thị phần tử đang được quan sát.

Ví dụ

Đoạn mã sau được lấy từ ví dụ resize-observer-border-radius.html (xem mã nguồn). Ví dụ này bao gồm một hộp màu xanh lá, có kích thước theo phần trăm kích thước viewport. Khi kích thước viewport thay đổi, các góc bo tròn của hộp thay đổi theo tỷ lệ kích thước của hộp. Chúng ta có thể chỉ cần triển khai điều này bằng border-radius với một giá trị phần trăm, nhưng cách đó nhanh chóng dẫn đến các góc elip trông xấu; giải pháp này cho bạn những góc vuông đẹp mắt, tỉ lệ theo kích thước của hộp.

Để lấy tham chiếu đến phần tử đang được quan sát để chúng ta có thể cập nhật giá trị border-radius của nó sau mỗi thay đổi, chúng ta dùng thuộc tính target của từng entry - entry.target.style.borderRadius.

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      entry.target.style.borderRadius = `${Math.min(
        100,
        entry.contentBoxSize.inlineSize / 10 +
          entry.contentBoxSize.blockSize / 10,
      )}px`;
    } else {
      entry.target.style.borderRadius = `${Math.min(
        100,
        entry.contentRect.width / 10 + entry.contentRect.height / 10,
      )}px`;
    }
  }
});

resizeObserver.observe(document.querySelector("div"));

Thông số kỹ thuật

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