檢測屬性顯示從無顯示到顯示塊

我試圖檢測元素顯示屬性何時發生變化。最初元素沒有顯示屬性。當元素髮生變化時，我想提醒。我試了下面的代碼，但沒有任何警報。檢測屬性顯示從無顯示到顯示塊

document.getElementById('xxx').addEventListener('DOMAttrModified', function(e){ 
    if (e.attrName === 'style') { 
    if (e.newValue === 'block') { 
     alert('test!'); 
    } 
    } 
}, false); 

setTimeout(function() { 
    var xxx = document.getElementById('xxx'); 
    xxx.style.display = 'block'; 
    console.log(xxx); 
}, 5000);

來源

2013-01-14 Mr. 1.0

您正在使用哪種瀏覽器？另外，你真的需要跟蹤嗎？這種東西很貴。但是如果你真的需要這樣做，請嘗試[Mutation Observers]（https://developer.mozilla.org/en-US/docs/DOM/MutationObserver）。您正在使用的「突變事件」已被棄用。並且突變「事件」和「觀察者」apis都有瀏覽器兼容性問題。 – bfavaretto

@bfavaretto我正在與鉻合作。這是我知道檢查這種事情的唯一方法。如果你有更好的解決方案，我不會介意探索它。 –

從[MDN（https://developer.mozilla.org/en-US/docs/DOM/Mutation_events）：「WebKit的不支持DOMAttrModified（見[WebKit的漏洞8191]（HTTPS：//bugs.webkit。 org/show_bug.cgi？id = 8191）和[解決方法]（http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen））「 – bfavaretto

下面是一個實際的例子，展示瞭如何使用mutation observers。請注意，我使用了WebKit前綴的MutationObserver實現，但是您提到您始終使用Chrome，因此您至少可以測試這一點，並在必要時對其進行調整以適應您的需求。

首先我們創建MutationObserver併爲其提供回調。此回調將使用2個參數調用 - 一組MutationRecord實例，其次是MutationObserver（負責調用回調的一個實例）的實例。將單個回調附加到多個MutationObservers時，這很有用。請注意，它接收一個MutationRecords數組，而不是每MutationRecord調用一次。這允許捆綁它們，這對於提高性能是必需的。

var observer = new WebKitMutationObserver(function(mutations) { 
    console.log(mutations); 
});

現在我們創建（可選）配置對象，指定什麼類型的突變，我們感興趣的。在這種情況下，一個屬性的突變。

var config = { attributes: true };

需要注意的是，儘管我們在這裏把它定義爲一個簡單的對象，這實際上將用作MutationObserverInit object。

現在，終於，我們告訴觀察者觀察節點：

observer.observe(document.getElementById('xxx'), config);

如果你有興趣，我改編成jsFiddle demo你的榜樣。

來源

2013-01-14 03:05:04 ilias

檢測屬性顯示從無顯示到顯示塊

回答

相關問題