Question

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

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

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

还能做些什么？

Answer 1

这就是你要找的东西：

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

Answer 2

根据Jeff的建议，我建议编写一个修改图像样式属性的函数，然后使用该函数作为所有其他函数必须修改该图像样式属性的瓶颈。

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

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

当您必须更改图像CSS属性时，可以从JavaScript中的任何位置调用上述两个函数。这些函数还将一个函数作为参数，该函数将在事后执行，假设函数作为第二个参数传入。

您可以进一步将其简化为单一功能，但我会留给您，因为我不确切知道您的目标是什么。

Answer 3

这是您不想修改的旧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被赋予一个带有一个参数的函数。带有一个参数的函数由一个匿名的自执行函数返回，该函数接受2个参数，在修改之前对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文件中），如果您想要回到原始行为，则只需删除扩展函数。

Answer 4

答案：请参阅此其他帖子＆gt;＆gt; is there an alternative to DOMAttrModified that will work in webkit

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

P.S：只是在这里为未来寻求相同智慧的人添加这个。

JS监视CSS属性更改，如“display：none”=＆gt;“display：block”？

4 个答案: