remove element css

Asked

Viewed 7,016 times

6

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

html

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

css

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

Wanted something in jquery that could remove css from a certain element.

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

If only in html:

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

I was wondering how can I remove css style in these types of situation

jquery css

  • $("#elemento").toggleClass("class"); doesn’t work? (I used this command to make a clock flash, second by second, when it came to a minute)

  • in this case I didn’t want to change the classes of an object, I wanted to remove the css that an html element has

  • I understand , but with the toggle vc disables/activates the class, does not change the class itself, only says when the object uses it or not.

2 answers

7


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

See working on: jsfiddle

Heed: it is not advisable to use css inline and be careful when using the method removeAttr('id') to take out the css, why does it actually remove the attribute and its selectors will stop working.

  • Could share a fiddle demonstrating the action?

  • Highlander, your answer is good and works in my example, but if for some reason, I didn’t have class, if it was an id. Or rather, if the style was being applied to the tag itself, how could I remove this style, because in that case removeClass() would not catch

  • @Gustavocinque would not be necessary, why the SOPT allows it to be executed right here, but anyway this there.

  • @Highlander I only asked because I don’t have access to Sopt’s snippet, it is blocked by my work, while I can access jsfiddle, but only ready, because the main page is also blocked :P

  • 1

    @Diegodesouzasilva if it was inline css you should remove the style attribute using removeAttr, but it is not recommended to use inline css, the above example is for your specific case, if you edit your answer by putting these extra questions I will edit mine showing the possible resolutions

  • @Gustavocinque Legal, here in my service much thing is blocked too :)

  • Blz Highlander, I’ll edit there then

Show 2 more comments

1

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

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

However, 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 standard attributes (simulating Zer them) over existing ones.

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.