javascript - CSSプロパティ変更リスナー

Question

CSSプロパティ変更リスナーの提案された実装はありますか？多分：

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/

Answer 2

のようなミューテーションイベントDOMAttrModifiedは廃止されました。代わりにMutationObserverの使用を検討してください。

例：

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

JS：

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);