你能監控 JavaScript 中的樣式變化嗎？

你能用事件監聽器監控樣式變化嗎？

在前端開發領域，能夠回應樣式變化動態的價值是無價的。過去，人們一直希望建立一個 jQuery 事件偵聽器來追蹤任何樣式變更。但是，此功能本身並不可用。

相反，開發了一種解決方法。透過重寫jQuery 的內部CSS 方法，可以在方法末尾新增一個觸發器，以便在發生樣式變更時觸發事件：

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

此解決方案提供了將事件偵聽器綁定到樣式變更的方法：

$('p').bind('style', function(e) {
    console.log( $(this).attr('style') );
});

$('p').width(100);
$('p').css('color','red');

MutationObservers 的現代技術

從那時起，技術不斷進步，MutationObservers 提供了一種更現代且符合標準的方法來檢測“風格”的變化' 屬性。現在不需要 jQuery：

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
    });    
});

var target = document.getElementById('myId');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

大多數現代瀏覽器都支援此方法，包括 Internet Explorer 11 。透過利用 MutationObserver，您可以有效地監控樣式變化並在應用程式中做出適當的回應。

以上是你能監控 JavaScript 中的樣式變化嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！