Supprimer le CSS d'une div en utilisant JQuery

Question

Dans mon application j'ai ce qui suit :

$("#displayPanel div").live("click", function(){
  $(this).css({'background-color' : 'pink', 'font-weight' : 'bolder'});
});

Lorsque je clique sur un Div, la couleur de ce Div est changée. Au sein de cette fonction de clic j'ai quelques fonctionnalités à faire. Après tout cela, je veux supprimer le Css appliqué au Div. Comment pourrais-je le faire en JQuery ?

Answer 1

Vous pouvez supprimer un CSS spécifique qui se trouve sur l'élément de cette manière :

$(this).css({'background-color' : '', 'font-weight' : ''});

Bien que je sois d'accord avec Karim que vous devriez probablement utiliser des classes CSS.

Answer 2

Vous pourriez utiliser la méthode removeAttr, si vous voulez supprimer tout le style inline que vous avez ajouté manuellement avec JavaScript. Il est préférable d'utiliser des classes CSS mais on ne sait jamais.

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

Answer 3

Placez vos propriétés CSS dans une classe, puis faites quelque chose comme ceci :

$("#displayPanel div").live("click", function(){
   $(this).addClass('someClass');
});

Ensuite, là où se trouvent vos "autres fonctionnalités", faites quelque chose comme :

$("#myButton").click(function(){
   $("#displayPanel div").removeClass('someClass');
});

Answer 4

Vous pouvez supprimer les propriétés inline de cette manière :

$(sélecteur).css({'propriété':'', 'propriété':''});

Par exemple :

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

Cela est essentiellement mentionné ci-dessus, et cela fonctionne définitivement.

En passant, c'est utile dans des cas tels que lorsque vous avez besoin de réinitialiser un état après une animation. Bien sûr, je pourrais écrire une demi-douzaine de classes pour gérer cela, ou je pourrais utiliser ma classe de base et #id pour effectuer quelques calculs, et effacer le style inline que l'animation applique.

$(actpar).animate({top:0, opacity:1, duration:500}, function() {
   $(this).css({'top':'', 'opacity':''});
});

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

/*exemple de code: je préfère étendre JQuery pour pouvoir l'utiliser n'importe où je veux.

$('#searchJqueryObject').removeCss('background-color');
$('#searchJqueryObject').removeCss('background-color,height,width'); //prend en charge les noms de css séparés par des virgules.

*/

OU

//cela analyse le style & supprime le style & reconstruit le style. J'aime le premier.. mais j'explore quand même..
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(";"));
        });
    }
});