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

Question

我想知道有没有办法找出内联CSS样式的来源。正如您在下面的图片中看到的，我有一个使用JavaScript生成的内联样式的元素。有时我的代码似乎会破坏并将宽度设置为0px，从而使div不可见。

我查看了所有的JS文件，但似乎无法找到错误。

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

Answer 1

由于您使用的是Chrome：

1. 右键单击页面中的元素，然后单击 Inspect Element
2. 右键单击元素的DOM检查器视图，然后 Break on ...→Attributes Modifications

当使用JS修改元素的内联样式时，调试器将触发，就好像它已经达到断点一样。

这将显示JS的相关行并为您提供一个堆栈，以便您可以找出调用该行的位置。

Answer 2

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

此外，如果您不希望覆盖您指定的样式，则可以使用！important：

#element{

css-property:value !important;
}