监听元素类名变化的方法

发表于 | 更新于: | 分类于 | | 阅读次数:
字数统计: 436字 | 阅读时长 ≈ 1分钟

监听元素类名变化的方法 (2025-04-01 10:46:59)

Question：如何监听一个元素 class 类名的变化
Answer：

监听元素 class 类名变化的方法

要监听一个元素的 class 类名变化，有几种主要方法：

1. MutationObserver API

这是现代浏览器中监听元素属性变化的最佳方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 创建一个观察器实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === 'class') {
      const targetElement = mutation.target;
      console.log('类名已更改:', targetElement.className);
      // 这里可以执行你的回调函数
    }
  });
});

// 选择需要观察的节点
const targetNode = document.getElementById('your-element-id');

// 配置观察选项
const config = { attributes: true, attributeFilter: ['class'] };

// 开始观察目标节点
observer.observe(targetNode, config);

// 之后如果要停止观察
// observer.disconnect();

2. 重写 className 属性的 setter/getter

对于特定元素，可以通过重写其 className 属性来监听变化：
1
2
3
4
5
6
7
8
9
10
11
12
13
const element = document.getElementById('your-element-id');
const originalClassName = element.className;

Object.defineProperty(element, 'className', {
  get: function() {
    return originalClassName;
  },
  set: function(value) {
    console.log('类名从', originalClassName, '变为', value);
    originalClassName = value;
    // 执行回调函数
  }
});

3. 使用 CSS 动画事件（间接方法）

通过 CSS 过渡或动画触发事件来间接监听：
1
2
3
4
5
6
7
8
9
10
11
12
<style>
.monitored-element {
  transition: opacity 0.01s;
}
</style>

<script>
const element = document.getElementById('your-element-id');
element.addEventListener('transitionend', () => {
  console.log('类名可能已更改:', element.className);
});
</script>

4. 定时轮询（不推荐，但简单）

1
2
3
4
5
6
7
8
9
10
const element = document.getElementById('your-element-id');
let lastClassName = element.className;

setInterval(() => {
  if (element.className !== lastClassName) {
    console.log('类名从', lastClassName, '变为', element.className);
    lastClassName = element.className;
    // 执行回调函数
  }
}, 100); // 每100毫秒检查一次
MutationObserver 是最推荐的方法，因为它效率高且是专门为此类监听设计的浏览器 API。