11

My is a noob question as I am just learning JS so I am not good at it yet.

I am currently building a website ad added some JS snippets to do few actions. Now my footer has opacity: 0 and it doesn't come from CSS, therefore must come from some JS, but I cannot find it. How do I find what JS is modifying the style of a specific HTML element in the Chrome or Firefox DevTools?

Here is a screenshot to show the code: https://imgur.com/iYIeSPO

I checked all my JS files but couldn't find anything that gives my footer opacity:0.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
Andrea
  • 125
  • 1
  • 7

3 Answers3

18

The Chrome DevTools allow you to stop at a specific change in the DOM structure.

To do that right click the element and choose Break on > attribute modifications from the context menu.

Break on attribute modifications

Then, once the style attribute is added (may require a page reload), the script execution will stop at the JavaScript line where the change occurred.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
1

As far as I know you can't see which part of the code is changing the style.

Try setting breakpoints to find out where it sets it.

Maybe it isn't in your js files? It could be a script element in the document

kess
  • 1,204
  • 8
  • 19
  • I use Brackets and searched for opacity: 0 in in Find in Files but found nothing that gives it to the footer. So must be coming from some external script. I will study how to set breakpoints. Thank you. – Andrea Jun 23 '19 at 09:24
1

To prevent that from happening, you can add a small <script> tag to the end of your .html file.

<!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>

If you really want to check what is changing your style attribute, you can check these guides from chrome and firefox on how to set breakpoints in devtools.

Hope this helps!

CodeIt
  • 3,492
  • 3
  • 26
  • 37
  • I added the script after the closing HTML but still doesn't work. I will check the guides and hope I can find the problem with those. Thank you – Andrea Jun 23 '19 at 09:30