Supprimer le CSS d'une Div en utilisant JQuery

Je suis nouveau sur JQuery. Dans mon application, j'ai les éléments suivants:

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

Lorsque je clique sur une Div, la couleur de cette Div est modifiée. Dans cette fonction Click, j'ai quelques fonctionnalités à faire. Après tout cela, je veux supprimer le Css appliqué de la Div. Comment pourrais-je le faire dans JQuery?

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

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

Ensuite, où se trouvent vos `` autres fonctionnalités '', faites quelque chose comme:

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

Vous pouvez supprimer des css spécifiques qui se trouvent sur l'élément comme ceci:

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

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

Vous pouvez utiliser la méthode removeAttr, si vous souhaitez supprimer tout le style en ligne que vous avez ajouté manuellement avec javascript. Il vaut mieux utiliser des classes CSS mais on ne sait jamais.

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

Vous pouvez supprimer les propriétés en ligne de cette façon:

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

Par exemple:

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

Ceci est essentiellement mentionné ci-dessus, et cela fait définitivement l'affaire.

BTW, cela est utile dans les cas tels que lorsque vous devez effacer un état après l'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 faire des maths, et effacer le style en ligne appliqué par l'animation.

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

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.

*/

OU

//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(";"));
        });
    }
});

À noter, en fonction de la propriété, vous pourrez peut-être le définir sur auto.

Définissez la valeur par défaut, par exemple:

$ (this) .css ("hauteur", "auto");

ou dans le cas d'autres fonctionnalités CSS

$ (this) .css ("hauteur", "hériter");

En fait, le meilleur moyen que j'ai trouvé pour le faire lorsque vous devez faire un style complexe basé sur jquery, par exemple, si vous avez un modal que vous devez afficher mais qu'il doit calculer les décalages de page pour obtenir les paramètres corrects dans lesquels ils devront entrer la fonction a jQuery ("x"). css ({}).

Voici donc le réglage des styles, la sortie des variables calculées en fonction de divers facteurs.

$(".modal").css({ border: "1px solid #ccc", padding: "3rem", position: "absolute", zIndex: 999, background: "#fff", top: "30", visibility: "visible"})

Afin d'effacer ces styles. plutôt que de définir quelque chose comme

$(".modal").css({ border: "", padding: "", position: "", zIndex: 0, background: "", top: "", visibility: ""})

La manière simple serait

$(".modal").attr("style", "")

Lorsque jquery manipule des éléments sur le dom, les styles sont écrits sur l'élément dans l'attribut "style" comme si vous écriviez les styles en ligne. Tout ce que vous avez à faire est d'effacer cet attribut et l'élément doit revenir à ses styles d'origine

J'espère que cela t'aides

j'ai le même problème aussi, supprimez simplement la valeur

<script>
      $("#play").toggle(function(){$(this).css("background","url(player.png) -100px 0px no-repeat");},
      function(){$(this).css("background","");});
</script>

Si vous ne voulez pas utiliser de classes (ce que vous devriez vraiment), la seule façon d'accomplir ce que vous voulez est d'enregistrer d'abord les styles modifiés:

var oldFontSize = $(this).css("font-size");
var oldBackgroundColor = $(this).css("background-color");

// set style
// do your thing

$(this).css("font-size",oldFontSize);
// etc...

J'ai utilisé la deuxième solution de user147767

Cependant, il y a une faute de frappe ici. Ça devrait être

curCssName.toUpperCase (). indexOf (cssName.toUpperCase () + ':') <0

pas <= 0

J'ai également changé cette condition pour:

! curCssName.match (nouveau RegExp (cssName + "(-. +) ?:"), "mi")

comme parfois nous ajoutons une propriété css sur jQuery, et elle est ajoutée d'une manière différente pour différents navigateurs (c'est-à-dire que la propriété border sera ajoutée en tant que "border" pour Firefox, et "border-top", "border-bottom" etc pour IE ).

Avant d'ajouter une classe, vous devez vérifier si elle avait déjà une classe avec la méthode .hasClass ()

Pour votre question spécifique. Vous devriez mettre vos affaires dans la feuille de style en cascade. Il est recommandé de séparer la conception et la fonctionnalité.

la solution proposée pour ajouter et supprimer des noms de classe est donc la meilleure pratique.

cependant, lorsque vous manipulez des éléments, vous ne contrôlez pas la façon dont ils sont rendus. removeAttr ('style') est le MEILLEUR moyen de supprimer tous les styles en ligne.

J'ai un peu modifié la solution de user147767 pour rendre possible l'utilisation strings, arrayset objectsen entrée:

/*!
 * 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/