js 监听class变动
时间: 2023-12-02 15:38:55 浏览: 47
JS可以使用MutationObserver来监听DOM元素的变化,包括class的变化。MutationObserver是一个异步API,可以在DOM发生变化时得到通知并执行相应的回调函数。可以通过以下步骤来监听class变动:
1. 创建一个MutationObserver对象,传入一个回调函数作为参数。
2. 调用MutationObserver对象的observe方法,传入要监听的DOM元素和一些配置选项。
3. 在回调函数中处理DOM变化的情况,例如判断class是否发生变化并执行相应的操作。
举个例子,如果要监听一个class为"example"的div元素的变化,可以这样写:
```
// 创建一个MutationObserver对象
const observer = new MutationObserver((mutationsList, observer) => {
// 遍历所有变化
for (let mutation of mutationsList) {
// 判断是否是class变化
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
// 处理class变化的情况
console.log('class changed');
}
}
});
// 要监听的DOM元素
const targetNode = document.querySelector('.example');
// 配置选项
const config = { attributes: true, childList: false, subtree: false };
// 开始监听
observer.observe(targetNode, config);
```