4

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

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

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

还能做什么？

4

4 回答 4

8

这就是您要查找的内容：

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);
于 2012-05-05T03:12:33.967 回答
1

这是您不想修改的旧 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修改之前的引用。

总而言之，在更高的层次上，originalFunctionandmyCallback作为参数传递给自执行匿名函数，并传递给变量 legacyFn 和 callback，然后将新函数分配给originalFunction.

现在，当您调用 时originalFunction('.someClassOnAnImage')，legacyFn 将触发，这将提醒选择器并将 display 属性设置为 none。之后，回调函数（如果存在）将触发，然后您将看到：

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

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

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

于 2012-05-05T18:26:21.773 回答
1

答案：查看其他帖子 >>是否有可以在 webkit 中使用的 DOMAttrModified 的替代品

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

PS：这里只是为具有相同智慧的未来寻求者添加这个。

于 2012-05-31T21:58:35.357 回答
0

基于 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 中的任何位置调用上述两个函数。这些函数还将函数作为参数，假设函数作为第二个参数传入，之后将执行该函数。

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

于 2012-05-05T03:09:35.423 回答