检测chrome中的元素样式更改

Question

我正试图找到一种方法来检测元素样式的变化,但我没有太多运气.下面的代码适用于我定义的新属性,如tempBgColor,但我不能覆盖/遮蔽像color这样的现有属性.我知道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执行此操作- 请参阅演示(仅限Webkit),这是获取DOM更改通知的新方式.较旧的,现已弃用的方式是Mutation事件.

单击段落时,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);

感谢这篇博客,对于一些上面的代码.

Answer 2

打开Chrome的开发者工具后,您可以找到您感兴趣的样式更改的元素,右键单击它,选择"Break on ..."和"Attributes modification".