Javascript JS监视CSS属性的更改，如；显示：无“=&燃气轮机&引用；显示：block"；？

当图像的CSS属性“display”被任何其他JS脚本/函数更改时，我想运行一些JS代码。是否有任何方法可以监视该更改并设置回调函数

$(this).bind.('propertychange', function(){}) 

不能这样做，setInterval也是一个坏主意

---

还可以做些什么？

根据Jeff的建议，我建议编写一个函数来修改image style属性，然后将该函数用作所有其他函数修改该image style属性时必须经过的瓶颈

function showImage(selector, callback) {
    $(selector).css("display","block");
    if(callback)
        callback();
}

function hideImage(selector, callback) {
    $(selector).css("display","none");
    if(callback)
        callback();
}

当您必须更改image CSS属性时，可以从JavaScript中的任何地方调用类似上述两个函数的内容。这些函数还将函数作为参数，如果函数作为第二个参数传入，则随后将执行该参数

---

您可以将其进一步简化为一个函数，但我将把它留给您，因为我不知道您这样做的具体目标是什么。

这就是您要寻找的：

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

---

这在您不想修改的旧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

被分配一个带有一个参数的函数。接受一个参数的函数由接受两个参数的匿名自执行函数返回，该函数在修改前引用

原始函数

，并引用

回调

函数。这两个函数引用在闭包内被“锁定”，因此当自执行函数为

原始函数

分配新值时，

legacyFn

参数在修改之前仍然包含对

原始函数

的引用

总之，在更高的级别上，

originalFunction

和

myCallback

作为参数传递给自执行匿名函数，并传递给变量legacyFn和callback，然后将新函数分配给

originalFunction

现在，当您调用

originalFunction（'.someClassOnAnImage'）

时，legacyFn将启动，这将提醒选择器并将display属性设置为none。之后，回调函数（如果存在）将启动，然后您将看到：

The image with src = '.someClassOnAnImage' has been modified!

虽然这不如假设的或特定于平台的addEventListener好，但它确实允许您修改遗留代码中函数的行为，而无需物理地打开这些文件并修改它们。这只是扩展函数以执行其他行为，但不需要修改原始函数，甚至不需要修改原始文件

---

您可以将所有扩展整齐地包含在一个单独的JavaScript文件（或您正在使用的任何JavaScript文件）中，如果您想回到原始行为，只需删除扩展函数即可。

答案：请参阅另一篇文章>>

咆哮： DOM突变事件是解决问题的关键。然而，在新一轮的浏览器大战中，Wekit和Gecko无法在内容上达成一致。Gecko做了修改，webkit有一个叫做变异观察者的东西（它打破了事件处理程序被附加到事件上的模式，但是当我们想要锁定用户/编码者时，谁会关心一致性呢？；）

---

附言：只需在此处添加此内容，以供未来具有相同智慧的搜索者使用。

为什么您不能覆盖/拦截其他JS函数，而不是将绑定到CSS属性更改弄乱？@Jeff感谢您的评论。原因是我无法更改他们的代码，或者他们的代码太复杂而无法更改。另一方面，在不同的系统之间保持干净是一种很好的做法。我理解（相信我），但您可以覆盖该函数，执行条件句柄，然后调用原始函数，而不会影响其他系统。我已经做了无数次了，没有问题。这种方法很有效。但是我想知道我们是否可以在不改变其他代码的情况下解决这个问题。谢谢，太好了！这就是我要找的。谢谢。@Marian-很好的解决方案，但我的Chrome调试器似乎无法实现这一点？你知道我可能错过了什么吗？我在您的个人资料图像上添加了一个id，并试图使用

$（'#testt'）.attr（“style”，“display:none”）隐藏图像并且我没有看到任何日志语句。“documentElement”应该是实际元素的占位符吗？您是否还可以包含一个更详细地描述此内容的链接？谢谢你。@marian zburlea-我得到了与jmort253相同的结果。这段代码看起来只适用于Firefox，不适用于Chrome。这是真的吗？另一种方法是使用setInterval并通过比较默认值和当前值来侦听属性更改，但这是资源消耗。这是一个有用的答案，但对我来说并不适用。因为这个解决方案有两个条件。第一：它们的函数不应该是匿名的，而应该是命名的（即使在全局名称speace中）。第二：我必须知道他们所有的函数名（可能不止一个函数），这些函数改变了CSS。这些条件使得这个解决方案与它们的代码和逻辑混合在一起。一旦他们更改了代码，我们就必须更新此代码。谢谢你的帮助。：）说得好！你这么说真有趣。实际上，我不得不回去重构我的一些方法，以便命名它们。虽然我认为这对我和我的场景来说是一个很好的实践，但我可以看到这个解决方案在您的特定场景中是如何受到限制的。谢谢你的跟进！