本文目錄導(dǎo)讀：

1. 通過Class變化來響應(yīng)
2. 利用CSS屬性變化

JQuery與CSS交互：無需監(jiān)聽，只需響應(yīng)

在網(wǎng)頁開發(fā)中，我們經(jīng)常需要利用JavaScript（特別是JQuery）來操作或響應(yīng)CSS樣式的變化，雖然直接監(jiān)聽CSS變化在jQuery中并不直接支持，但我們可以通過其他方式來實(shí)現(xiàn)相應(yīng)的效果。

通過Class變化來響應(yīng)

我們可以利用jQuery來監(jiān)聽元素的class變化，當(dāng)CSS類發(fā)生變化時(shí)，我們可以通過jQuery的.hasClass()或者.attr('class')來檢測并響應(yīng)這些變化。

$('selector').bind('DOMNodeInserted', function() {
    if ($(this).hasClass('myClass')) {
        // 樣式變化后的操作
    }
});

利用CSS屬性變化

對(duì)于某些CSS屬性的變化，我們可以使用jQuery的.css()方法來獲取或設(shè)置，并通過事件來響應(yīng)這些變化，我們可以監(jiān)聽元素的寬度或高度變化：

var originalWidth = $('selector').width();
$('selector').resize(function() {
    var newWidth = $(this).width();
    if (newWidth != originalWidth) {
        // 寬度發(fā)生變化后的操作
    }
});

三、使用MutationObserver監(jiān)聽DOM變化

雖然MutationObserver不是直接監(jiān)聽CSS變化，但可以監(jiān)聽DOM的變化，當(dāng)CSS變化導(dǎo)致DOM結(jié)構(gòu)發(fā)生變化時(shí)，我們可以使用MutationObserver來捕捉這些變化。

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type == 'childList' || mutation.type == 'attributes') {  // 根據(jù)需要調(diào)整mutation類型
            // DOM發(fā)生變化后的操作
        }
    });
});
observer.observe(document.body, { childList: true, subtree: true, attributes: true }); // 根據(jù)需要調(diào)整觀察目標(biāo)和選項(xiàng)

雖然jQuery沒有直接提供監(jiān)聽CSS變化的API，但我們可以通過其他方式來實(shí)現(xiàn)類似的功能，以上是一些常見的方法，可以根據(jù)實(shí)際需求選擇適合的方式來實(shí)現(xiàn)對(duì)CSS變化的響應(yīng)。