jQuery如何监听元素大小变化事件？-编程学习网

这篇文章将为大家详细讲解有关jQuery如何监听元素大小变化事件？，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

jQuery 提供了多种方法来监听元素大小变化事件。以下是两种最常用的方法：

1. resize() 事件

resize() 事件在元素大小发生变化时触发。要使用它，请使用以下语法：

$(selector).resize(function() {
  // 元素大小发生变化时执行此函数
});

当元素大小发生变化时，将执行匿名函数。该函数可以包含更新元素样式、内容或执行其他操作的代码。

示例：

$("div").resize(function() {
  $(this).css("background-color", "red");
});

当 div 元素大小发生变化时，其背景颜色将变为红色。

2. MutationObserver

MutationObserver 是一个 Web API，它允许您观察 DOM 中的更改，包括元素大小的更改。要使用它，请使用以下语法：

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === "attributes" && mutation.attributeName === "style") {
      // 元素大小发生了变化
    }
  });
});

observer.observe(element, { attributes: true, subtree: true });

当元素大小发生变化时，MutationObserver 将触发 attributes 类型和 style 属性名的变异。您可以使用此信息来执行特定操作，例如更新元素样式或内容。

示例：

const div = document.querySelector("div");

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === "attributes" && mutation.attributeName === "style") {
      div.style.color = "blue";
    }
  });
});

observer.observe(div, { attributes: true, subtree: true });

当 div 元素大小发生变化时，其文本颜色将变为蓝色。

选择方法

选择哪种方法取决于您的特定需求和应用程序类型。