首頁猿問聽“風(fēng)格改變&rdqu...

聽“風(fēng)格改變”事件有可能嗎？

JavaScript JQuery

縹緲止盈 2019-07-03 15:43:24

聽“風(fēng)格改變”事件有可能嗎？是否可以在jQuery中創(chuàng)建可以綁定到任何樣式更改的事件偵聽器？例如，如果我想在元素更改維度時“做”某件事，或者在樣式屬性中做任何其他更改，我可以這樣做：$('div').bind('style', function() { console.log($(this).css('height'));});$('div').height(100); // yields '100'這將是非常有用的。有什么想法嗎？更新對不起，我自己回答了這個問題，但我寫了一個很好的解決方案，可能適合其他人：(function() { var ev = new $.Event('style'), orig = $.fn.css; $.fn.css = function() { $(this).trigger(ev); return orig.apply(this, arguments); }})();這將臨時覆蓋內(nèi)部Prototype.css方法，并在最后用觸發(fā)器重新定義它。所以它是這樣工作的：$('p').bind('style', function(e) { console.log( $(this).attr('style') );});$('p').width(100);$('p').css('color','red');

查看完整描述

3 回答

梵蒂岡之花

TA貢獻(xiàn)1900條經(jīng)驗獲得超5個贊

由于jquery是開放源代碼的，所以我想您可以修改css函數(shù)來調(diào)用您選擇的函數(shù)(傳遞jQuery對象)。當(dāng)然，您需要瀏覽jQuery代碼，以確保它在內(nèi)部沒有使用任何其他方法來設(shè)置CSS屬性。理想情況下，您希望為jQuery編寫一個單獨的插件，這樣它就不會干擾jQuery庫本身，但是您必須決定這對您的項目是否可行。

反對回復(fù) 2019-07-03

江戶川亂折騰

TA貢獻(xiàn)1851條經(jīng)驗獲得超5個贊

自從這個問題被提出以來，事情已經(jīng)有了一些進(jìn)展-現(xiàn)在可以使用突變觀察員要檢測元素的“樣式”屬性中的更改，不需要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'] });

傳遞給回調(diào)函數(shù)的參數(shù)是誘變d對象，該對象允許您獲取舊的和新的樣式值。

支持是在現(xiàn)代瀏覽器中很好包括IE 11+。

反對回復(fù) 2019-07-03

翻閱古今

TA貢獻(xiàn)1780條經(jīng)驗獲得超5個贊

事件對象的聲明必須在新的CSS函數(shù)中。否則，該事件只能觸發(fā)一次。

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

反對回復(fù) 2019-07-03