[英]How do I see what JS is changing style to my elements in Chrome dev tools or Firefox dev tools?
我是一个菜鸟问题，因为我只是在学习 JS，所以我还不擅长它。
我目前正在构建一个网站广告，添加了一些 JS 片段来执行一些操作。 现在我的页脚有opacity: 0并且它不是来自 CSS，因此必须来自某些 JS，但我找不到它。 如何在 Chrome 或 Firefox DevTools 中找到什么 JS 正在修改特定 HTML 元素的样式？
这是显示代码的屏幕截图：
我检查了我所有的 JS 文件，但找不到任何让我的页脚opacity:0 。
Chrome DevTools 允许您在 DOM 结构中的特定更改处停止。
为此，右键单击该元素并从上下文菜单中选择中断>属性修改。
然后，一旦添加了style属性（可能需要重新加载页面），脚本执行将在发生更改的 JavaScript 行处停止。
据我所知，您看不到代码的哪一部分正在改变样式。
尝试设置断点以找出它设置的位置。
也许它不在您的 js 文件中？ 它可以是文档中的脚本元素
为了防止这种情况发生，您可以在.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 中查看这些指南，了解如何在 devtools 中设置断点。
希望这可以帮助！
如何使用 chrome 开发工具来查明页面移动元素的原因？
[英]How can I use chrome dev tools to pinpoint the cause of elements on my page shifting?
如何在Chrome Dev Tools中使用jQuery遍历执行上下文？
[英]How do I traverse Execution Contexts with jQuery in Chrome Dev Tools?
chrome 开发工具和 Firefox 开发工具有什么不同？
[英]What is different between chrome dev-tools and Firefox dev-tools?
为什么在重新计算 chrome 开发工具中的样式之前评估过 js？
[英]js evaluated before recalculating style in chrome dev tools why?
我的服务工作者中的IndexedDB add（）成功，但是我无法在Chrome开发工具应用程序/存储中看到它的数据
[英]My IndexedDB add() in my service worker succeed but I cannot see the data it in the Chrome dev tools Application/Storage
Chrome 开发工具：如何查看 HTML 元素的附加事件侦听器
[英]Chrome dev tools: How to see attached event listeners for an HTML element
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.