如何找到设置元素内联样式的 JavaScript？答案

【问题标题】：How can I find the JavaScript that is setting the inline style of an element?如何找到设置元素内联样式的 JavaScript？
【发布时间】：2014-06-13 16:22:00
【问题描述】：

我想知道有什么方法可以找出内联 CSS 样式的来源。如下图所示，我有一个使用 JavaScript 生成的具有内联样式的元素。有时我的代码似乎会中断并将宽度设置为 0px，从而使 div 不可见。

我浏览了所有的 JS 文件，但似乎找不到错误。

有没有办法找到正确的文件和行，就像开发工具对 css 文件所做的那样？

【问题讨论】：

如果您包含您的代码和您正在使用的任何库，我们中的一个人也许能够找到罪魁祸首。但是要回答您的问题，我不知道有什么机制可以清楚地告诉您应用样式的来源。
不了解 grep，可能有用。我会看看它，但它似乎很复杂。
Grep 非常简单，它只是一个命令行工具，可以让您在文件中搜索字符串。除非你知道一个字符串出现在你关心的代码附近，但在你的代码库的许多其他地方没有出现，否则它不是很有帮助。

标签： javascript html css

【解决方案1】：

由于您使用的是 Chrome：

右键单击页面中的元素并检查元素
右键单击元素的 DOM 检查器视图并Break on... → Attributes Modifications

当用JS修改元素的内联样式时，调试器会像遇到断点一样触发。

这将向您显示 JS 的相关行并为您提供一个堆栈，以便您找出该行是从哪里调用的。

【讨论】：

好的，这是一种解决方法，但它可能会起作用。谢谢，会试一试。
如果您是调试器的新手，您可能需要一段时间（对我来说确实如此）才能意识到您需要按 F5（而不是 Ctrl+R）来刷新页面并查看断点在行动。
请注意，有时很难在正确的时间放置断点，因为 html 断点可能会在动态生成的元素上丢失。在 html 中，在要检查的元素之后添加一个 `。这允许一种简单的方法来尽早暂停代码，允许您检查并添加断点。此答案的更多上下文：stackoverflow.com/a/37331222/339803

【解决方案2】：

您可以使用 chrome 调试器/firefox 来检查元素的样式及其层次结构。

此外，如果您不希望您指定的样式被覆盖，您可以使用 !important:

#element{

css-property:value !important;
}

【讨论】：

OP 已经知道它是直接设置在元素上的。他们正试图追查设置它的 JS。
是的，我知道。但这仍然不能告诉我哪个 Javascript 文件生成了特定的内联 CSS。
important 大多数时候应该避免。仅将它用于状态修饰符，例如想要用颜色覆盖文本或背景颜色的警告：例如 red !important。