सीएसएस संपत्ति परिवर्तन श्रोता

Question

एक सीएसएस संपत्ति परिवर्तन श्रोता के किसी भी सुझाए गए कार्यान्वयन? हो सकता है कि:

thread = 

function getValues(){ 
    while(true){ 
    for each CSS property{ 
     if(properties[property] != nil && getValue(property) != properties[property]){alert('change')} 
     else{properties[property] = getValue(property)} 
    } 
    } 
} 

Answer 1

मुझे लगता है कि आप इस के लिए देख रहे:

document.documentElement.addEventListener('DOMAttrModified', function(e){ 
    if (e.attrName === 'style') { 
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue); 
    } 
}, false); 

आप इसके लिए गूगल, तो सामान का एक गुच्छा ऊपर आता है। यह हालांकि आशाजनक दिखता है:

http://darcyclarke.me/development/detect-attribute-changes-with-jquery/

DOMAttrModified तरह

Answer 2

उत्परिवर्तन घटनाओं पदावनत कर रहे हैं। इसके बजाय एक MutationObserver का उपयोग करने पर विचार करें।

उदाहरण:

<div>use devtools to change the <code>background-color</code> property of this node to <code>red</code></div> 
<p>status...</p> 

जे एस:

var observer = new MutationObserver((mutations) => { 
    mutations.forEach((mutation) => { 
    if (mutation.target.style.color === 'red') { 
     document.querySelector('p').textContent = 'success'; 
    } 
    }); 
}); 

var observerConfig = { 
    attributes: true, 
    childList: false, 
    characterData: false, 
    attributeOldValue: true 
}; 

var targetNode = document.querySelector('div'); 
observer.observe(targetNode, observerConfig);