Remove CSS from a Div using JQuery

Question

I m new to JQuery  In my App I have the following       displayPanel div   live  click   function        this  css   background-color     pink    font-weight     bolder           When I click on a Div  the color of that Div is changed  Within that Click function I have some functionalities to do  After all that I want to remove the applied Css from the Div  How could I do it in JQuery

User · Answer

You can remove specific css that is on the element like this     this  css   background-color         font-weight            Although I agree with karim that you should probably be using CSS classes

User · Answer

Set the default value  for example     this  css  height    auto     or in the case of other CSS features    this  css  height    inherit

User · Answer

I modified user147767 s solution a bit to make it possible to use strings  arrays and objects as input          jquery removecss js v0 2 - https   stackoverflow com a 17196154 1250044    Remove multiple properties from an element in your DOM         author Yannick Albert    yckart     param  Array Object String  css       Copyright  c  2013 Yannick Albert  http   yckart com     Licensed under the MIT license  http   www opensource org licenses mit-license php      2013 06 19         fn removeCss   function  css        var properties           var is     type css        if  is      array   properties   css      if  is      object   for  var rule in css  properties push rule       if  is      string   properties   css replace           split            return this each function              var  this     this             map properties  function  prop                 this css prop                                  set some styling    body   css       color   white       border   1px solid red       background   red          remove it again    body   removeCss  background       body   removeCss   border        body   removeCss       color   white        http   jsfiddle net ARTsinn 88mJF

User · Answer

You can remove inline properties this way     selector  css   property       property          For example     actpar  css   top       opacity          This is essentially mentioned above  and it definitely does the trick   BTW  this is useful in instances such as when you need to clear a state after animation  Sure I could write a half dozen classes to deal with this  or I could use my base class and  id do some math  and clear the inline style that the animation applies      actpar  animate  top 0  opacity 1  duration 500   function          this  css   top       opacity

User · Answer

If you don t want to use classes  which you really should   the only way to accomplish what you want is by saving the changing styles first   var oldFontSize     this  css  font-size    var oldBackgroundColor     this  css  background-color        set style    do your thing    this  css  font-size  oldFontSize      etc

User · Answer

Actually the best way I have found to do this when having to do complex jquery based styling  for Example  if you have a modal that you need to display but it needs to calculate page offsets to get the correct parameters those will need to go into the a jQuery  x   css     function   So here is the setting of the styles  the output of variables that have computed based on various factors       modal   css   border   1px solid  ccc   padding   3rem   position   absolute   zIndex  999  background    fff   top   30   visibility   visible      In order to clear those styles  rather than setting something like      modal   css   border      padding      position      zIndex  0  background      top      visibility         The simple way would be      modal   attr  style         When jquery manipulates elements on the dom  the styles are written to the element in the  style  attribute as if you were writing the styles inline  All you have to do is to clear that attribute and the item should reset to its original styles  Hope this helps

User · Answer

i have same prob too  just remove the value   lt script gt            play   toggle function     this  css  background   url player png  -100px 0px no-repeat            function     this  css  background           lt  script gt

User · Answer

You could use the removeAttr method  if you want to delete all the inline style you added manually with javascript  It s better to use CSS classes but you never know          displayPanel div   removeAttr  style

User · Answer

I used the second solution of user147767  However  there is a typo here  It should be      curCssName toUpperCase   indexOf cssName toUpperCase             lt  0   not  lt   0  I also changed this condition for       curCssName match new RegExp cssName       -          mi     as sometimes we add a css property over jQuery  and it s added in a different way for different browsers  i e  the border property will be added as  border  for Firefox  and  border-top    border-bottom  etc for IE

User · Answer

Before adding a class you should check if it already had class with  hasClass   method  For your specific question  You should be putting your stuff in Cascading Stylesheet  It s best practice to separate design and functionality   so the proposed solution of adding and removing class names is best practice   however when you are manipulating elements you don t control of how they are rendered  removeAttr  style   is BEST way to remove all inline styles

User · Answer

Put your CSS properties into a class  then do something like this       displayPanel div   live  click   function         this  addClass  someClass          Then where your  other functionalities  are do something like       myButton   click function           displayPanel div   removeClass  someClass

User · Answer

jQuery fn extend        removeCss  function cssName            return this each function                 var curDom     this               jQuery grep cssName split                           function cssToBeRemoved                            curDom css cssToBeRemoved                                           return curDom                           example code  I prefer JQuery extend so I can use it anywhere I want to use       searchJqueryObject   removeCss  background-color        searchJqueryObject   removeCss  background-color height width      supports comma separated css names        OR    this parse style  amp  remove style  amp  rebuild style  I like the first one   but anyway exploring   jQuery fn extend        removeCSS  function cssName            return this each function                  return   this  attr  style                jQuery grep   this  attr  style   split                           function curCssName                            if  curCssName toUpperCase   indexOf cssName toUpperCase           lt   0                              return curCssName                         join

User · Answer

As a note  depending upon the property you may be able to set it to auto

[jquery] Remove CSS from a Div using JQuery

Examples related to jquery

Examples related to css