JS来监视CSS属性的变化，像"display:none"=>"display:block"？
当图像的CSS属性"display“被任何其他JS脚本/函数更改时，我想运行一些JS代码。有没有什么方法可以监控这个变化并设置一个回调函数？
$(this).bind.('propertychange', function(){}) 不能这样做，而且setInterval也不是一个好主意。
还能做些什么呢？
回答 4
Stack Overflow用户
发布于 2012-05-05 03:12:34
这就是您要查找的内容：
document.documentElement.addEventListener('DOMAttrModified', function(e){
if (e.attrName === 'style') {
console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
}
}, false);Stack Overflow用户
发布于 2012-05-05 18:26:22
这位于您不想修改的旧版JavaScript文件中：
// this is your original, unmodified function
function originalFunction(sel) {
alert(sel);
$(sel).css("display","none");
}这是您的代码中的代码：
// here is a sample callback function you pass into the extended function below
function myCallback(s) {
alert("The image with src = '" + $(s).attr("src") + "' has been modified!");
}
// here is how you can extend the function to do what you want
// without needing to modify the actual code above
originalFunction = (function(legacyFn, callback) {
// 1 arg function to be returned and reassigned to originalFunction
return function(sel) {
// call "original" originalFunction, with alert and image hide.
legacyFn(sel);
if(callback) callback(sel); // invoke your callback
}
})(originalFunction, myCallback);为变量originalFunction分配了一个函数，该函数接受一个参数。接受一个参数的函数由一个匿名的、自动执行的函数返回，该函数接受两个参数、修改前对originalFunction的引用和对callback函数的引用。这两个函数引用在闭包中变得“锁定”，因此当originalFunction随后被自执行函数分配一个新值时，legacyFn参数在被修改之前仍然包含对originalFunction的引用。
总之，在更高的级别上，originalFunction和myCallback作为参数传递给自动执行的匿名函数，并传递给变量legacyFn和callback，然后将一个新函数赋给originalFunction。
现在，当您调用originalFunction('.someClassOnAnImage')时，legacyFn将触发，这将警告选择器并将display属性设置为none。然后，回调函数(如果存在)将被触发，然后您将看到：
The image with src = '.someClassOnAnImage' has been modified!虽然这不如假设的或特定于平台的addEventListener好，但它确实允许您修改遗留代码中函数的行为，而不必物理地打开那些文件并修改它们。这只是简单地扩展函数来执行其他行为，而不需要修改原始函数，甚至不需要修改原始文件。
您可以灵活地将所有扩展包含在单独的JavaScript文件(或您正在使用的任何JavaScript文件)中，如果您想要恢复到原始行为，只需删除扩展函数。
Stack Overflow用户
发布于 2012-05-31 21:58:35
答案是:请参阅>> is there an alternative to DOMAttrModified that will work in webkit的另一篇文章
大声疾呼: DOM突变事件是解决问题的关键。然而，在新一轮的浏览器大战中，Wekit和Gecko在内容上存在分歧。虽然Gecko有DOMAttrModified，但webkit有一种叫做突变观察者的东西(它打破了事件处理器附加到事件的模式，但是，当我们想要将用户/程序员锁定在正确的位置时，谁会关心一致性呢？;)
附言:只是在这里为未来寻求相同智慧的人添加这一点。
https://stackoverflow.com/questions/10458428
复制相似问题
腾讯云开发者
