remove element css

Question

remove element css

Navigation

#1 by (7 votes)
#2 by (1 votes)

6

I wanted to know how I can via jquery remove all css styles from a given html element. Example:

html

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

css

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

I wanted something in jquery that could remove the css from a given element.

And that was not only restricted to classes as in the previous example.

If no html is like this:

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

I wanted to know how I can remove the css style in these types of situations

jquery css

asked by anonymous 16.12.2015 / 13:02

2 answers

1

In the examples you mentioned, to remove through the class or inline style this code works:

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

But there are other situations that would require a more complex resolution, such as a css set in a tag. In this case you would have to set default attributes (simulating zero) over existing ones.

16.12.2015 / 13:24

Roundup of 5 in 5 cents How to Filter Multiple Fields in Query?

score 7 · Accepted Answer

Simple, 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><h1class="titulo">Título</h1>
<h1 style="color: red" id="titulo2">Título</h1>
<h1 id="titulo3">Título</h1>

See working at: jsfiddle

Warning: It is not advisable to use inline css and caution when using the removeAttr('id') method to remove the css, because it actually removes the attribute and its selectors will stop working. >