首頁 >web前端 >js教程 >如何高效率檢測DIV元素尺寸變化?

如何高效率檢測DIV元素尺寸變化?

Patricia Arquette
Patricia Arquette原創
2024-11-29 11:03:10801瀏覽

How Can I Efficiently Detect Dimension Changes in DIV Elements?

DIV 元素中的尺寸變化檢測

檢測DIV 元素尺寸的變化,尤其是在視窗大小調整期間,可能是一項很有價值的功能在某些情況下。本文探討如何使用 Resize Observer API 來實現此目的。

jQuery 調整大小事件處理程序(如提供的 HTML 程式碼所示)不適合此目的。 Resize Observer API 提供了一種標準化且更有效的方法來偵聽 DOM 元素中的尺寸變化。

使用Resize Observer API

偵測DIV 中的尺寸變化使用Resize Observer API,請依照下列步驟操作:

  1. 建立一個新的ResizeObserver instance:
const observer = new ResizeObserver(callback);
  1. 將回調函數傳遞給ResizeObserver 建構函數,每當觀察到的元素的尺寸改變時就會呼叫函數:
function callback(entries) {
  // Check if the entry pertains to the target DIV
  const targetIndex = entries.findIndex((entry) => entry.target === targetDiv);
  if (targetIndex < 0) {
    return;
  }

  // Update the dimensions based on the entry's contentRect
  const { width, height } = entries[targetIndex].contentRect;
  targetDiv.style.width = `${width}px`;
  targetDiv.style.height = `${height}px`;
}
  1. 使用ResizeObserver觀察目標DIV實例:
observer.observe(targetDiv);
  1. 在您的 HTML 程式碼中,確保包含適用於舊版瀏覽器的 Resize Observer填充:
<script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>

範例程式碼

以下程式碼片段提供了使用調整大小的實際範例Observer API:

<div>

透過利用Resize Observer API,您可以有效地檢測DIV 元素中的尺寸變化,從而使您能夠在Web應用程式中做出相應的回應。

以上是如何高效率檢測DIV元素尺寸變化?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn