如何找到哪个 JavaScript 正在改变元素的样式？答案

【问题标题】：How do I find which JavaScript is changing an element's style?如何找到哪个 JavaScript 正在改变元素的样式？
【发布时间】：2010-08-03 22:42:57
【问题描述】：

我有一个通过 JavaScript 应用样式的元素。我不确定到底在哪里；有没有办法检查 Firebug 以显示“element.style”的实际来源？

【问题讨论】：

【解决方案1】：

如果您确定它是在内联 style 上设置的，而不是作为样式表规则的结果，您可以使用非标准 Mozilla watch() 方法检测更改：

document.body.style.watch('color', function(name, v0, v1) {
    alert(name+': '+v0+'->'+v1);
});
document.body.style.color= 'red';

您可以将debugger; 放入观察器函数中，然后在 Firebug 中查找调用堆栈以查看触发更改的位置。

【讨论】：

【解决方案2】：

应this question的要求：

如果您有 Firefox，您可以在 HTML 选项卡中选中“属性更改中断”选项。只需右键单击目标元素，就会弹出菜单。之后，调整窗口大小，它将在更改属性的脚本行中中断。

【讨论】：

【解决方案3】：

您也可以在设置样式之前右键单击 HTML 面板中的元素，然后在属性更改上选择中断。必须启用脚本面板。

【讨论】：

【解决方案4】：

我认为这是这项工作的默认工具，尽管它的调试功能有限：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

另外，请确保广告拦截器不负责。

【讨论】：

【解决方案5】：

您可以打开脚本视图并在搜索框中搜索“.style”。

【讨论】：