检测chrome中的元素样式更改 [英] Detect element style change in chrome

问题描述

我试图找到一种方法来检测元素样式的变化，但我没有太多运气。下面的代码在我定义的新属性tempBgColor上工作，但我无法覆盖/隐藏像颜色这样的现有属性。我知道jquery有一个watch函数，但它只能检测jquery api的变化，但不能直接更改elem.style.color之类的样式值。

  var e = document.getElementById（'element'）; 
 e.style .__ defineGetter __（color，function（）{
 returnA property; 
}）; 
 e.style .__ defineSetter __（color，function（val）{
 alert（Setting+ val +！）; 
}）; 
  

任何指针？

解决方案

您应该可以通过 MutationObserver

a> - 请参阅 演示 （仅适用于Webkit），这是一种全新的闪亮方式收到有关DOM变化的通知。较旧的，现在已被弃用的方式是突变事件。

演示只需在单击段落时在控制台中记录旧值和新值。请注意，如果通过非内联CSS规则设置旧值，但仍然会检测到更改。

strong>

 < p id =observablestyle =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）; 
 
 //点击事件来改变我们正在观察的事物的颜色
 target.addEventListener（'click'，function（ev）{
 observable.style.color ='green '; 
返回false; 
}，false）; 
  

归功于这篇博客文章，以上部分代码。

I'm trying to find a way to detect changes to the element style but I haven't had much luck. The code below works on a new property I define like tempBgColor but I cannot override/shadow an existing property like color. I know jquery has a watch function, but it only detects changes from the jquery api but not directly changing the value of a style something like 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 + "!");
});

Any pointers?

解决方案

You should be able to do this with a MutationObserver - see demo (Webkit only), which is the new, shiny way of getting notified about changes in the DOM. The older, now deprecated, way was Mutation events.

Demo simply logs in the console the old and new values when the paragraph is clicked. Note that the old value will not be available if it was set via a non-inline CSS rule, but the change will still be detected.

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

Credit to this blog post, for some of the code above.

这篇关于检测chrome中的元素样式更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！