JS监视CSS属性的变化，如“display:none”=>“display:block”

JS to monitor the CSS property change like "display:none"=>"display:block"?

本文关键字：display 监视 block none CSS 变化 JS 属性      更新时间：2023-09-26

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

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

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

还能做些什么？

这是您要查找的：

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被分配一个接受一个参数的函数。接受一个参数的函数由一个匿名的自执行函数返回，该函数接受 2 个参数，即对修改前originalFunction的引用以及对callback函数的引用。这两个函数引用在闭包内被"锁定"，因此当自执行函数为originalFunction赋值时，legacyFn 参数仍然包含对修改之前originalFunction的引用。

总之，在更高级别，originalFunction和myCallback作为参数传递给自执行的匿名函数，并传递到变量 legacyFn 和回调中，然后将一个新函数分配给originalFunction。

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

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

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

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

答案：请参阅另一篇文章>>是否有可以在webkit中使用的DOMAttrModified的替代方案

咆哮：DOM 突变事件是问题的关键。然而，在新一波的浏览器大战中，Wekit和Gecko无法在东西上达成一致。虽然Gecko有DOMAttrModified，但webkit有一个名为突变观察器的东西(它打破了事件处理程序附加到事件的模式，但是当我们想要锁定用户/编码人员时，谁关心一致性呢？ ;)

PS：只是在这里添加这个，供未来寻求相同智慧的人使用。

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

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

相关文章：