logo标签列表

在Chrome开发工具或Firefox开发工具中，如何查看JavaScript更改了哪些元素的样式？

javascriptgoogle-chrome-devtoolsfirefox-developer-tools
12

我的问题可能很基础，因为我刚开始学习JS，所以还不太擅长。

我正在构建一个网站，添加了一些JS代码片段来执行一些操作。现在我的页脚具有opacity:0的样式，这不是来自CSS，必须来自某些JS，但我找不到它。如何在Chrome或Firefox DevTools中找到哪个JS修改了特定HTML元素的样式？

这里是一个屏幕截图，展示了代码: https://imgur.com/iYIeSPO

我检查了所有JS文件，但找不到任何给我的页脚opacity:0的东西。

3个回答
20
Chrome DevTools允许您在DOM结构的特定更改处停止。要做到这一点，请右键单击该元素，然后从上下文菜单中选择Break on>attribute modifications。{{请注意保留原文中的符号和标记}}

Break on attribute modifications

然后，一旦添加了style属性（可能需要重新加载页面），脚本执行将停止在发生更改的JavaScript行。

1
据我所知，您无法看到哪一部分代码正在更改样式。
尝试设置断点以找出它在哪里设置。
也许它不在您的js文件中？它可能是文档中的脚本元素。
我使用Brackets并在“查找文件”中搜索了opacity：0，但没有发现任何与页脚相关的东西。所以它一定来自一些外部脚本。我将学习如何设置断点。谢谢。 - Andrea
1
为了防止这种情况发生，您可以在.html文件的末尾添加一个小的<script>标签。 

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <footer class="footer" style="opacity: 0;">My footer </footer>
</body>

</html>
<script>
  /* Place this script tag at the end of your document */
  document.getElementsByClassName("footer")[0].style.opacity = 1; //sets opacity of footer element to 1
</script>

如果您真的想检查是什么在改变您的 style 属性，您可以查看这些来自 chrome 和 firefox 的指南，了解如何在开发工具中设置断点。

希望这能有所帮助！

我把脚本添加到HTML结束标签后，但仍然无法工作。我将查看指南，希望能找到问题所在。谢谢。 - Andrea
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接