js如何監(jiān)聽元素尺寸變化 檢測(cè)元素大小變化的3種監(jiān)聽方案！

監(jiān)聽元素尺寸變化的三種方案中，resizeobserver 是最優(yōu)選擇，因其性能高效且專為此設(shè)計(jì)；若需兼容舊瀏覽器，可選用 mutationobserver 或傳統(tǒng)事件監(jiān)聽。1. resizeobserver：現(xiàn)代瀏覽器首選，僅在元素尺寸變化時(shí)觸發(fā)回調(diào)，api 簡(jiǎn)潔高效；2. mutationobserver：通過監(jiān)聽 dom 屬性變化間接實(shí)現(xiàn)，適用于需兼容舊版瀏覽器但性能略差；3. 傳統(tǒng)事件監(jiān)聽：如 window.onresize，兼容性最好但性能較差且監(jiān)聽全局。對(duì)于頻繁變化，建議使用節(jié)流或防抖優(yōu)化性能。

監(jiān)聽 JavaScript 中元素尺寸變化，主要有三種方案：ResizeObserver、MutationObserver 以及傳統(tǒng)的事件監(jiān)聽方式（例如 window.onresize）。ResizeObserver 是目前最推薦的方式，因?yàn)樗阅芎?，專門為監(jiān)聽元素尺寸變化而生。但兼容性方面需要考慮，如果需要兼容老版本瀏覽器，MutationObserver 或事件監(jiān)聽可能是更好的選擇。

ResizeObserver：現(xiàn)代瀏覽器的首選

ResizeObserver 接口允許你監(jiān)聽 html 元素的尺寸變化。它比傳統(tǒng)的 window.onresize 事件更高效，因?yàn)樗辉谀繕?biāo)元素尺寸真正發(fā)生變化時(shí)才觸發(fā)回調(diào)，避免了不必要的計(jì)算。

基本用法:

const element = document.getElementById('yourElement');  const resizeObserver = new ResizeObserver(entries => {   for (let entry of entries) {     const width = entry.contentRect.width;     const height = entry.contentRect.height;      console.log(`Element's new size: width=${width}, height=${height}`);     // 在這里執(zhí)行你的邏輯，例如重新布局、更新圖表等   } });  resizeObserver.observe(element);  // 如果不再需要監(jiān)聽，可以取消監(jiān)聽 // resizeObserver.unobserve(element); // 或者取消所有監(jiān)聽 // resizeObserver.disconnect();

優(yōu)勢(shì):

• 高效: 只有在元素尺寸真正變化時(shí)才觸發(fā)回調(diào)。
• 簡(jiǎn)單易用: API 設(shè)計(jì)簡(jiǎn)潔明了。
• 針對(duì)性強(qiáng): 專門用于監(jiān)聽元素尺寸變化。

兼容性:

需要考慮瀏覽器的兼容性?？梢圆殚?Can I Use 網(wǎng)站了解詳細(xì)信息。對(duì)于不支持 ResizeObserver 的瀏覽器，需要使用其他方案。

MutationObserver：監(jiān)聽 DOM 變化的備選方案

MutationObserver 接口可以監(jiān)聽 DOM 樹的變化，包括元素的屬性、子節(jié)點(diǎn)等。雖然它不是專門為監(jiān)聽元素尺寸變化而設(shè)計(jì)的，但可以通過監(jiān)聽元素的屬性變化來間接實(shí)現(xiàn)。

基本用法:

const element = document.getElementById('yourElement');  const observer = new MutationObserver(mutations => {   mutations.forEach(mutation => {     if (mutation.type === 'attributes' && mutation.attributeName === 'style') {       // 檢查元素的寬度或高度是否發(fā)生變化       const width = element.offsetWidth;       const height = element.offsetHeight;       console.log(`Element's size changed: width=${width}, height=${height}`);     }   }); });  observer.observe(element, {   attributes: true,   attributeFilter: ['style'] // 只監(jiān)聽 style 屬性的變化 });  // 停止監(jiān)聽 // observer.disconnect();

缺點(diǎn):

• 性能: 比 ResizeObserver 性能稍差，因?yàn)樾枰O(jiān)聽所有屬性變化，然后過濾出與尺寸相關(guān)的變化。
• 復(fù)雜性: 使用起來比 ResizeObserver 更復(fù)雜。

適用場(chǎng)景:

• 需要兼容老版本瀏覽器，且對(duì)性能要求不高。
• 需要監(jiān)聽元素尺寸變化之外的其他 DOM 變化。

傳統(tǒng)事件監(jiān)聽：兼容性最好的方案

可以使用 window.onresize 事件來監(jiān)聽窗口大小的變化，然后根據(jù)窗口大小的變化來判斷元素尺寸是否發(fā)生變化。

基本用法:

window.onresize = () => {   const element = document.getElementById('yourElement');   const width = element.offsetWidth;   const height = element.offsetHeight;    console.log(`Element's size changed: width=${width}, height=${height}`); };

缺點(diǎn):

• 性能: 每次窗口大小變化都會(huì)觸發(fā)回調(diào)，即使元素尺寸沒有發(fā)生變化。
• 全局性: 監(jiān)聽的是全局窗口的 resize 事件，而不是特定元素的尺寸變化。

適用場(chǎng)景:

• 需要兼容所有瀏覽器。
• 只需要在窗口大小變化時(shí)執(zhí)行一些全局性的操作。

如何選擇合適的監(jiān)聽方案？

選擇哪種監(jiān)聽方案取決于你的具體需求。

• 如果只需要監(jiān)聽元素尺寸變化，且不需要兼容老版本瀏覽器，那么 ResizeObserver 是最佳選擇。
• 如果需要兼容老版本瀏覽器，且對(duì)性能要求不高，那么 MutationObserver 是一個(gè)不錯(cuò)的備選方案。
• 如果需要兼容所有瀏覽器，且只需要在窗口大小變化時(shí)執(zhí)行一些全局性的操作，那么可以使用傳統(tǒng)的事件監(jiān)聽方式。

如何處理頻繁的尺寸變化？

如果元素尺寸變化非常頻繁，可能會(huì)導(dǎo)致回調(diào)函數(shù)被頻繁調(diào)用，影響性能。可以使用節(jié)流或防抖技術(shù)來限制回調(diào)函數(shù)的執(zhí)行頻率。

節(jié)流:

function throttle(func, delay) {   let timeoutId;   let lastExecTime = 0;    return function(...args) {     const currentTime = Date.now();      if (!timeoutId) {       if (currentTime - lastExecTime >= delay) {         func.apply(this, args);         lastExecTime = currentTime;       } else {         timeoutId = setTimeout(() => {           func.apply(this, args);           timeoutId = null;           lastExecTime = Date.now();         }, delay - (currentTime - lastExecTime));       }     }   }; }  const throttledResizeObserver = new ResizeObserver(throttle(entries => {   // 處理尺寸變化   console.log("Throttled resize event"); }, 200)); // 200ms 節(jié)流

防抖:

function debounce(func, delay) {   let timeoutId;    return function(...args) {     clearTimeout(timeoutId);     timeoutId = setTimeout(() => {       func.apply(this, args);     }, delay);   }; }  const debouncedResizeObserver = new ResizeObserver(debounce(entries => {   // 處理尺寸變化   console.log("Debounced resize event"); }, 200)); // 200ms 防抖

使用 css 媒體查詢監(jiān)聽元素尺寸變化？

雖然 CSS 媒體查詢通常用于響應(yīng)屏幕尺寸的變化，但也可以結(jié)合 JavaScript 來監(jiān)聽特定元素的尺寸變化。首先，在 CSS 中定義一個(gè)媒體查詢，當(dāng)元素滿足特定尺寸條件時(shí)，應(yīng)用特定的樣式。然后，使用 JavaScript 來監(jiān)聽這些樣式的變化，從而間接監(jiān)聽元素的尺寸變化。這種方法相對(duì)復(fù)雜，且不如 ResizeObserver 直接和高效，所以不推薦作為主要的監(jiān)聽方案。