Prevent css changes with javascript

You can do this by rewriting the style with jQuery when the page loads. Use cssText with !important that will override the element reference in CSS.

For example, I want the text of div to always be blue. See that in the CSS below I put it to turn red (% with%). When the page loads, jQuery will redo the style with whatever values I want:

$(document).ready(function(){
    $(".footer").css("cssText","color: #00f !important");
});

.footer{
   color: #f30 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="footer">Texto sempre azul</div>

With pure JavaScript, you use #f30 !important :

document.addEventListener("DOMContentLoaded", function(){
   let el = document.querySelector(".footer");
   el.style.setProperty("color", "#00f", "important");
});

.footer{
   color: #f30 !important;
}

<div class="footer">Texto sempre azul</div>

  

Just remembering that this does not give any guarantee. Anyone with knowledge can change, overwrite or remove the code.

The staff may find it strange, but I've been through it, in my case it was not changing but capturing this DIV joins the DOM when it reads the whole body of HTML.

I believe he wants to modify the contents of document.body , but wants to keep the DIV in question.

In order not to have to change the whole code that you have already created, I can give you a solution, save the FOOTER content in a variable, so you will not even have to hide it with CSS:

var footer = document.getElementById('.footer').outerHTML;

Follow the example:

var footer;
function novapagina(){
   footer = document.getElementById('footer').outerHTML;
   alert('Nova página');
   document.body.innerHTML = "NOVO CONTEUDO";
   alert('Inserir rodapé');
   document.body.innerHTML += footer;
}

<h1>HEADER</h1>
<input type="button" onclick="novapagina()" value="Nova página" /><br />
<p id="footer">MEU RODAPE FIXO</p>