我正试图找到一种方法来检测元素样式的变化,但我的运气并不好。下面的代码适用于我定义的新属性,如 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 + "!");
});
有什么建议吗?
最佳答案
您应该可以使用 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 ,对于上面的一些代码。
关于javascript - 检测 chrome 中的元素样式变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13566346/