1

eu tenho uma div com a classe footer quando vou estiliza-la no css e deixo em display: none; desaparece ate ai tudo bem. mas queria que quando utilizado css para ocultar essa div ela não sofrer nenhum efeito. Ex:

 .footer {
   display:none !important;
}

mesmo com a tag !important eu quero que essa classe não sofra alterções. Eu ja tentei com uma tag javascript.

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

E com JQuery

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

Resumindo eu quero forçar com javascript a essa classe não sofrer efeitos.

5
  • 1
    Sua dúvida não faz muito sentido, porque se você não quer que sofra alterações, basta você simplesmente não faze-las. Commented 1/03/2018 às 17:19
  • @LuizFelipe pensei a mesma coisa Commented 1/03/2018 às 17:24
  • o objetivo e que quem possua meu template não possa modifica-las Commented 1/03/2018 às 17:25
  • Tá aí um bom recurso para disponibilizar no CSS 4 (se é que já não está finalizado). Boa oportunidade para você contribuir nessa implementação na nova versão =) Commented 1/03/2018 às 17:35
  • 1
    uma vez no browser a tela pertence ao usuário pode fazer o que quiser Commented 1/03/2018 às 18:05

2 Respostas 2

0

Você pode fazer isso reescrevendo o estilo com jQuery quando a página é carregada. Use cssText com !important que irá anular a referência do elemento no CSS.

Por exemplo, quero que o texto da div seja sempre azul. Veja que no CSS abaixo coloquei para ficar vermelho (#f30 !important). Quando a página é carregada, o jQuery irá refazer o estilo com os valores que eu quiser:

$(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>

Com JavaScript puro, você usa 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>

Só lembrando que isso não dá garantia nenhuma. Qualquer pessoa com conhecimento poderá alterar, sobrescrever ou remover o código.

0

O pessoal pode achar estranho, mas eu já passei por isso, no meu caso não era alterar e sim capturar essa DIV junta no DOM quando lê o corpo todo do HTML.

Eu acredito que ele queira modificar o conteúdo do document.body, mas quer manter a DIV em questão.

Pra não ter que alterar o código todo que você já deve ter criado, eu posso dar uma solução, salve o conteúdo do FOOTER numa variável, assim nem vai precisar ocultar ela com CSS:

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

Segue o exemplo:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .