如何找到哪个 JavaScript 正在改变元素的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3401298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I find which JavaScript is changing an element's style?
提问by Andy
I have an element that's getting styles applied via JavaScript. I'm not sure exactly where; is there a way to check Firebug to show where the "element.style" is actually coming from?
我有一个通过 JavaScript 应用样式的元素。我不确定具体在哪里；有没有办法检查 Firebug 以显示“element.style”的实际来源？
回答by bobince
If you're sure it's being set on the inline styleand not as a consequence of a stylesheet rule, you can detect changes using the non-standard Mozilla watch()method:
如果您确定它被设置在内联style而不是样式表规则的结果，您可以使用非标准的 Mozilla watch()方法检测更改：
document.body.style.watch('color', function(name, v0, v1) {
alert(name+': '+v0+'->'+v1);
});
document.body.style.color= 'red';
You can put debugger;in the watcher function and look up the call stack in Firebug to see where the change was triggered.
您可以放入debugger;watcher 函数并在 Firebug 中查找调用堆栈以查看触发更改的位置。
回答by johnjbarton
You can also right click on the element in the HTML panel before the style is set and select break on Attribute Change. Script panel must be enabled.
您还可以在设置样式之前右键单击 HTML 面板中的元素，然后选择中断属性更改。必须启用脚本面板。
回答by Simon
On request from this question:
根据这个问题的要求：
If you have firefox you can check the "Break on Attribute Change" option in the HTML tab. Just right click the target element and the menu will pop up. After that, resize the window and it will break in the script line where the attribute is changed.
如果您有 Firefox，您可以检查 HTML 选项卡中的“中断属性更改”选项。只需右键单击目标元素，就会弹出菜单。之后，调整窗口大小，它将在更改属性的脚本行中中断。
回答by Marko
I think this is what is default tool for the job, although it has limited debugging capabilities: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
我认为这是这项工作的默认工具，尽管它的调试功能有限：https: //developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Also, make sure Ad Blocker is not responsible.
此外，请确保 Ad Blocker 不承担任何责任。
回答by Felix Kling
You can open the script view and search for ".style" in the searchbox.
您可以打开脚本视图并在搜索框中搜索“.style”。
