Question

我是一个菜鸟问题，因为我只是在学习JS，所以我还不擅长。

我目前正在制作一个网站广告，其中添加了一些JS代码段，以执行少量操作。现在我的页脚有opacity: 0，它不是来自CSS，因此必须来自某些JS，但我找不到它。如何找到什么JS在Chrome或Firefox DevTools中修改特定HTML元素的样式？

下面是显示代码的屏幕截图：

我检查了所有JS文件，但找不到任何能使页脚opacity:0突出的内容。

Answer 1

据我所知，您看不到代码的哪一部分正在更改样式。

尝试设置断点以找出它的设置位置。

也许它不在您的js文件中？可能是文档中的脚本元素

Answer 2

为防止这种情况发生，您可以采取的措施之一是在<script>文件的末尾添加一个小的.html标签。

<!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中的这些指南，了解如何在devtools中设置断点。

希望这会有所帮助！

Answer 3

Chrome开发者工具可让您停止DOM结构的特定更改。

要执行此操作，请右键单击该元素，然后从上下文菜单中选择中断> 属性修改。

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

如何查看Chrome开发工具或Firefox开发工具中哪些JS在改变我的元素的样式？

3 个答案: