web-dev-qa-db-fra.com

Supprimer le CSS d'une div à l'aide de 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 de clic, j'ai quelques fonctionnalités à faire. Après tout ce que je veux supprimer les CSS appliquées de la Div. Comment pourrais-je le faire dans JQuery?

jquerycss
167
useranon

Mettez 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ù sont vos "autres fonctionnalités", faites quelque chose comme:

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

Vous pouvez supprimer un css spécifique qui se trouve 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.

307
thatismatt

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")

221
jeroen.verhoest

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 des cas tels que lorsque vous devez effacer un état après animation. Bien sûr, je pourrais écrire une demi-douzaine de classes pour traiter ce problème ou utiliser ma classe de base et #id pour faire des calculs et effacer le style en ligne appliqué par l’animation.

$(actpar).animate({top:0, opacity:1, duration:500}, function() {
   $(this).css({'top':'', 'opacity':''});
});
39
Chad
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(";"));
        });
    }
});
12
user147767

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

7
Jeff Davis

En fait, le meilleur moyen que j'ai trouvé de le faire lorsque je dois utiliser un style complexe basé sur JQuery, par exemple, si vous avez une modale que vous devez afficher mais qu'il faut calculer les décalages de page pour obtenir les paramètres corrects, il faudra l'inclure dans la fonction jQuery ("x"). css ({}).

Donc, voici le réglage des styles, la sortie des variables qui ont été 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 mettre quelque chose comme

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

Le moyen simple serait

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

Lorsque jquery manipule des éléments sur le dom, les styles sont écrits dans l'élément avec 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 être réinitialisé à ses styles d'origine.

J'espère que cela t'aides

5
user3198542

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

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

ou dans le cas d'autres fonctionnalités CSS

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

5
somid3

j'ai le même prob aussi, il suffit de supprimer la valeur

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

Si vous ne voulez pas utiliser de classes (ce que vous devriez vraiment faire), la seule façon d'accomplir ce que vous voulez est de commencer par enregistrer les styles changeants:

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

// set style
// do your thing

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

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

Cependant, il y a une faute de frappe ici. CA devrait etre

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

pas <= 0

J'ai aussi changé cette condition pour:

! curCssName.match (new 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 ).

2
whiterabbit

J'ai modifié un peu user147767 solution pour permettre d'utiliser strings, arrays et objects comme 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/

1
yckart

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

Pour votre question spécifique. Vous devriez placer vos données dans la feuille de style en cascade. Il est recommandé de séparer le design et la fonctionnalité.

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

cependant, lorsque vous manipulez des éléments, vous ne contrôlez pas leur rendu. removeAttr ('style') est le MEILLEUR moyen de supprimer tous les styles en ligne.

1
PDA