Remove CSS from a Div using JQuery

Question

Hi, 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?

Answer 1

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');
});

Answer 2

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 now.

$("#displayPanel div").removeAttr("style")

Answer 3

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.

Answer 4

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...

Answer 5

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 & remove style & 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() + ':') <= 0)
                            return curCssName;
                    }).join(";"));
        });
    }
});

Answer 6

$(selector).css('property','').css('property','')});

i.e.

$(actpar).css('top','').css('opacity','')});

This is essentially mentinoned 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(){ $(actpar).css('top','').css('opacity','')

});

Answer 7

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

Answer 8

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 seperate 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.