javascript - 检测 chrome 中的元素样式变化

Question

我正试图找到一种方法来检测元素样式的变化，但我的运气并不好。下面的代码适用于我定义的新属性，如 tempBgColor，但我无法覆盖/隐藏现有属性，如颜色。我知道 jquery 有一个 watch 函数，但它只检测来自 jquery api 的变化，而不是直接改变像 elem.style.color 这样的样式的值。

var e = document.getElementById('element');
e.style.__defineGetter__("color", function() {
   return "A property";
});
e.style.__defineSetter__("color", function(val) {
    alert("Setting " + val + "!");
});

有什么建议吗？

Answer 1

您应该可以使用 MutationObserver 来做到这一点- 参见 demo (仅限 Webkit)，这是获得有关 DOM 更改通知的新的、 Shiny 的方式。较旧的，现已弃用的方式是 Mutation events .

Demo 只是在单击段落时在控制台中记录旧值和新值。请注意，如果旧值是通过非内联 CSS 规则设置的，则旧值将不可用，但仍会检测到更改。

HTML

<p id="observable" style="color: red">Lorem ipsum</p>​

JavaScript

var MutationObserver = window.WebKitMutationObserver;

var target = document.querySelector('#observable');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log('old', mutation.oldValue);
    console.log('new', mutation.target.style.cssText);
  });    
});

var config = { attributes: true, attributeOldValue: true }

observer.observe(target, config);

// click event to change colour of the thing we are observing
target.addEventListener('click', function(ev) {
    observable.style.color = 'green';
    return false;
}, false);

归功于 this blog post ，对于上面的一些代码。