如何监听由CSS文件触发的元素样式变化（基于jQuery 1.11.1）

你遇到的问题其实很常见——通过CSS样式表（比如:hover伪类）触发的样式变化，并不会修改元素自身的style属性，而是作用于计算样式（computed style），所以之前监听style属性的MutationObserver、attrchange插件这些方法自然抓不到这类变化。下面给你几个基于jQuery 1.11.1的可行方案，根据你的场景选择即可：

方案1：直接监听触发样式变化的事件（最优解，针对hover这类有明确触发源的场景） #

像:hover这种由用户交互触发的CSS样式变化，直接监听对应的DOM事件是最高效的方式。比如hover对应mouseenter和mouseleave事件，代码示例：

$('.test').on('mouseenter mouseleave', function() {
    // 获取当前元素的计算背景色
    const currentBg = $(this).css('background-color');
    console.log('背景色变为:', currentBg);
    // 在这里执行你需要的业务逻辑
});

这种方法没有性能开销，而且能精准捕捉样式变化的时机，完全适配你的CSS hover场景。

方案2：定时检查计算样式的变化（通用方案，适合无明确触发事件的场景） #

如果是其他无法通过事件监听的CSS变化（比如媒体查询触发的样式变更、父元素样式变化影响子元素等），可以用定时任务定期检查元素的计算样式，对比之前的值来判断是否发生变化：

$('.test').each(function() {
    const $elem = $(this);
    // 记录初始背景色
    let lastBgColor = $elem.css('background-color');
    
    // 定时检查，间隔可以根据需求调整（越小越灵敏但性能消耗越大）
    setInterval(function() {
        const currentBgColor = $elem.css('background-color');
        if (currentBgColor !== lastBgColor) {
            // 样式发生变化，更新记录并执行回调
            lastBgColor = currentBgColor;
            console.log('背景色已变化:', currentBgColor);
            // 这里写你的业务逻辑
        }
    }, 100);
});

注意：这种方法会有一定的性能开销，建议根据实际需求调整检查间隔，非必要情况下优先用方案1。

方案3：监听元素class属性变化（适合由class切换触发的样式变化） #

如果你的CSS样式变化是通过添加/移除class实现的（而非伪类），可以用MutationObserver监听元素的class属性变化：

function listenToClassChange($elem, callback) {
    const target = $elem[0];
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.attributeName === 'class') {
                callback($elem);
            }
        });
    });
    
    observer.observe(target, { attributes: true, attributeFilter: ['class'] });
}

// 调用示例
listenToClassChange($('.test'), function($elem) {
    const currentBg = $elem.css('background-color');
    console.log('Class变化导致背景色变为:', currentBg);
});

不过这个方案不适用于:hover这类伪类触发的样式变化，因为伪类不会修改元素的class属性。

备注：内容来源于stack exchange，提问作者Francisco Javier Rojas