javascript 检测 chrome 中的元素样式变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13566346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect element style change in chrome
提问by webber
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.
我试图找到一种方法来检测元素样式的变化，但我运气不佳。下面的代码适用于我定义的一个新属性，如 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 + "!");
});
Any pointers?
任何指针？
回答by andyb
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.
您应该能够使用MutationObserver来做到这一点- 请参阅演示（仅限 Webkit），这是一种新的、闪亮的方式来获取有关 DOM 更改的通知。较旧的，现已弃用的方式是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.
Demo 只需在单击段落时将旧值和新值登录到控制台即可。请注意，如果旧值是通过非内联 CSS 规则设置的，则旧值将不可用，但仍会检测到更改。
HTML
HTML
<p id="observable" style="color: red">Lorem ipsum</p>?
JavaScript
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.
信贷这篇博客，对于一些上面的代码。
回答by Stubbs
With Chrome's Developer Tools open, you can find the element whose style's change you're interested in, right click it, select "Break on..." and "Attributes modifications".
打开 Chrome 的开发者工具，您可以找到您感兴趣的样式更改的元素，右键单击它，选择“中断...”和“属性修改”。
回答by AlexandruSerban
here is a naive implementation using setTimeout with undescorejs.
这是一个使用 setTimeout 和 undescorejs 的简单实现。
The only way to find out which change was made is to iterate through the style object properties.
找出进行了哪些更改的唯一方法是遍历样式对象属性。
Here is the live example
这是现场示例
$( function () {
var ele = document.getElementById('ele'),
oldStyle = {};
function checkEquality() {
style = _.clone(ele.style);
if (!_.isEqual(style, oldStyle)) {
console.log('Not equal');
oldStyle = _.clone(style);
} else {
console.log('Equal');
}
_.delay(checkEquality, 2000);
}
checkEquality();
$('a#add_prop').on('click', function () {
var props = $('#prop').val().replace(/ /g, '').split(':');
console.log(props);
$(ele).css(props[0], props[1]);
});
$('#prop').on('keydown', function (e) {
if (e.keyCode == 13) {
$('a#add_prop').trigger('click');
}
});
});
