6

Queria saber como posso via jquery remover todos os estilos css de um determinado elemento html. Exemplo:

html

<h1 class="titulo">Título</h1>

css

.titulo{
   padding: 5px;
   color: #424255;
   margin-bottom: 5px;
   border-bottom: 1px solid #424255;
}

Queria algo no jquery que pudesse remover o css de um determinado elemento.

E que não fosse apenas restrito a classes como no exemplo anterior.

Se no html fosse assim:

<h1 style="padding: 5px; color: #424255; margin-bottom: 5px; border-bottom: 1px solid #424255;">Título</h1>

Queria saber como posso remover o estilo css nesses tipos de situação

3
  • $("#elemento").toggleClass("class"); não funciona? (Eu utilizei esse comando para fazer um relógio piscar, de segundo em segundo, quando chegasse a um minuto) 16/12/2015 às 12:04
  • nesse caso eu não queria alterar as classes de um objeto, eu queria remover o css que um elemento html possui
    – DiChrist
    16/12/2015 às 12:06
  • Entendo , mas com o toggle vc desativa/ativa a classe, não altera a classe em si, só diz quando o objeto usa ela ou não. 16/12/2015 às 12:23

2 Respostas 2

7

Simples, use : removeClass():

$(".titulo").removeClass(); // Remove todos os css da classe
$("#titulo2").removeAttr('style'); // Remove todos css inline
$("#titulo3").removeAttr('id'); // Remove todos css  do id
.titulo {
  padding: 5px;
  color: #424255;
  margin-bottom: 5px;
  border-bottom: 1px solid #424255;
}
#titulo3 {
  color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1 class="titulo">Título</h1>
<h1 style="color: red" id="titulo2">Título</h1>
<h1 id="titulo3">Título</h1>

Veja funcionando no: jsfiddle

Atenção: não é aconselhavel utilizar css inline e cuidado ao utilizar o metodo removeAttr('id') para tirar o css, por que ele realmente remove o atributo e seus seletores vão parar de funcionar.

7
  • Poderia compartilhar um fiddle demonstrando a ação? 16/12/2015 às 12:11
  • Highlander, sua resposta é boa e funciona no meu exemplo, mas se por algum motivo, eu não tivesse classe, se fosse um id. Ou melhor, se o estilo estivesse sendo aplicado na própria tag, como eu poderia remover esse estilo, porque nesse caso o removeClass() não ia pegar
    – DiChrist
    16/12/2015 às 12:12
  • @GustavoCinque não seria necessário, por que o SOPT permite que seja executado aqui mesmo, mas de qualquer forma esta ai. 16/12/2015 às 12:13
  • @Highlander Só pedi pois não tenho acesso ao snippet do SOpt, ele é bloqueado pelo meu trabalho, enquanto posso acessar o jsfiddle, mas somente prontos, pois a pagina principal também é bloqueada :P 16/12/2015 às 12:14
  • 1
    @DiegodeSouzaSilva se fosse css inline você deveria remover o atributo style usando removeAttr, mas não é recomendado utilizar css inline, o exemplo acima é para o seu caso especifico, se você editar sua resposta colocando estas dúvidas extras editarei o meu mostrando as possíveis resoluções 16/12/2015 às 12:15
1

Nos exemplos que você citou, para remover através da classe ou estilo inline esse código funciona:

$("titulo").attr("style", "").removeClass("titulo");

Porém existem outras situações que exigiriam uma resolução mais complexa, como um css setado em uma tag. Nesse caso você teria que setar atributos padrões (simulando zerá-los) por cima dos já existentes.

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 .