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

Question

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

Answer 1

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

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

您可以将debugger;放入观察程序功能中，并在Firebug中查找调用堆栈以查看更改的触发位置。

Answer 2

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

Answer 3

根据this question的要求：

  

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

Answer 4

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

Answer 5

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

此外，请确保不对广告拦截程序负责。