Prevent css changes with javascript

Question

I have a div with class footer when I’m going to style it in css and leave it on display: None; it disappears so far so good. but wanted when used css to hide that div it does not suffer any effect. Ex:

 .footer {
   display:none !important;
}

even with the tag !Important i want this class not to be altered. I’ve tried it with a javascript tag.

document.getElementById('.footer').style.display="block";

And with Jquery

$('.footer').css('display','block');

Summing up I want to force javascript to this class not suffer effects.

Answer 1

The staff may find strange, but I’ve been through it, in my case it was not change but capture this DIV join in the DOM when reading the whole body of HTML.

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

In order not to have to change all the code you must have created, I can give a solution, save the content of FOOTER in a variable, so you don’t even need 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>

Answer 2

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

For example, I want the text of div always be blue. See that in the CSS below I put to red (#f30 !important). When the page is loaded, jQuery will redo the style with the 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>
<div class="footer">Texto sempre azul</div>

With pure Javascript, you use setProperty:

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 remember that this gives no guarantee. Anyone with knowledge can change, overwrite or remove the code.