JS manipulates the DOM, then CSS doesn’t load properly on refresh, even though cache is disabled

PROBLEM

Hi, I have some JS that manipulates the DOM to show / hide certain elements when needed. It works perfectly when the event handler is fired. The problem is that when I refresh the page by clicking the reload button that every browser has: the CSS gets all messed up for pretty much everything.

The only way it becomes perfect again is if I click a link to the page that same JS is on.

When I comment the following JS out, then there is no problem when refreshing. So I know that is where the problem is. It’s as if the browser is caching it.

WHAT I’VE TRIED

I have the cache disabled in the dev tools: right click > Inspect > Network > Disable cache is turned on.

I’ve also done ctrl+f5 using a chrome based browser, and nothing worked.

CODE

main.css

form > p {
    position: absolute;  /* hide most p's that will be shown when event is fired */
    right: -1000px;
}

form p:first-of-type {
    position: static;  /* first p element is not hidden */
}

my.js

var form_p_wrappers = document.querySelectorAll('form > p');
for (var i=0; i < form_p_wrappers.length; i++) {
    form_p_wrappers[i].style.position = 'static';    // make form p's visible
}

I know it’s generally not good practice to do obj.style.x = 'value';… Adding / removing a class is usually much easier, and has never given me a problem (in fact, that works fine here)…

But I came across this problem recently, and in this case, doing it the above way was quicker and easier to write, if it worked the way I wanted…

QUESTIONS

  1. Does anyone know why it’s not properly reloading the CSS as I’d expect, unless I click a link to the page??

  2. Is there is a way to make it work the way I want without adding a class?? Again, adding / removing a class works perfectly, but in this instance, writing it the above way was quicker. I just want to know WHY it didn’t work the way I expected.

Thanks!