Comment supprimer un style ajouté avec la fonction .css ()?

Je change CSS avec jQuery et je souhaite supprimer le style que j'ajoute en fonction de la valeur d'entrée:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

Comment puis-je faire ceci?
Notez que la ligne ci-dessus s'exécute chaque fois qu'une couleur est sélectionnée à l'aide d'un sélecteur de couleurs (c'est-à-dire lorsque la souris se déplace sur une roue chromatique).

2ème note: je ne peux pas faire cela avec css("background-color", "none")car cela supprimera le style par défaut des fichiers CSS .
Je veux juste supprimer le background-colorstyle en ligne ajouté par jQuery .

Changer la propriété en une chaîne vide semble faire le travail:

$.css("background-color", "");

La réponse acceptée fonctionne mais laisse un styleattribut vide sur le DOM dans mes tests. Pas grave, mais cela supprime tout:

removeAttr( 'style' );

Cela suppose que vous souhaitez supprimer tous les styles dynamiques et revenir au style de feuille de style.

Il existe plusieurs façons de supprimer une propriété CSS à l'aide de jQuery:

1. Définir la propriété CSS à sa valeur par défaut (initiale)

.css("background-color", "transparent")

Voir la valeur initiale de la propriété CSS sur MDN . Ici, la valeur par défaut est transparent. Vous pouvez également utiliser inheritpour plusieurs propriétés CSS pour hériter l'attribut de son parent. Dans CSS3 / CSS4, vous pouvez également utiliser initial, revertou unsetmais ces mots clés peuvent avoir une prise en charge limitée du navigateur.

2. Suppression de la propriété CSS

Une chaîne vide supprime la propriété CSS, c'est-à-dire

.css("background-color","")

Mais attention, comme spécifié dans la documentation jQuery .css () , cela supprime la propriété mais il a des problèmes de compatibilité avec IE8 pour certaines propriétés abrégées CSS, y compris l' arrière-plan .

Définir la valeur d'une propriété de style sur une chaîne vide - par exemple $ ('# mydiv'). Css ('color', '') - supprime cette propriété d'un élément si elle a déjà été directement appliquée, que ce soit dans le style HTML , par la méthode .css () de jQuery, ou par la manipulation DOM directe de la propriété de style. Cependant, il ne supprime pas un style qui a été appliqué avec une règle CSS dans une feuille de style ou un élément. Avertissement: une exception notable est que, pour IE 8 et les versions antérieures, la suppression d'une propriété abrégée telle qu'une bordure ou un arrière-plan supprimera entièrement ce style de l'élément, indépendamment de ce qui est défini dans une feuille de style ou un élément .

3. Suppression de tout le style de l'élément

.removeAttr("style")

J'ai obtenu le moyen de supprimer un attribut de style avec du JavaScript pur juste pour vous faire savoir le chemin du JavaScript pur

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

Cela supprimera la balise complète:

  $("body").removeAttr("style");

l'une ou l'autre de ces fonctions jQuery devrait fonctionner:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 

En utilisant simplement:

$('.tag-class').removeAttr('style');

ou

$('#tag-id').removeAttr('style');

Que diriez-vous de quelque chose comme:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

Utilisez mon plugin:

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

Pour votre cas, utilisez-le comme suit:

$(<mySelector>).removeCss();

ou

$(<mySelector>).removeCss(false);

si vous souhaitez supprimer également le CSS défini dans ses classes:

$(<mySelector>).removeCss(true);

Essaye ça:

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

Merci

Si vous utilisez le style CSS, vous pouvez utiliser:

$("#element").css("background-color","none"); 

puis remplacez par:

$("#element").css("background-color", color);

Si vous n'utilisez pas le style CSS et que vous avez un attribut dans l'élément HTML, vous pouvez utiliser:

$("#element").attr("style.background-color",color);

2018

il y a une API native pour cela

element.style.removeProperty(propery)

Celui-ci fonctionne également !!

$elem.attr('style','');

Pourquoi ne pas faire le style que vous souhaitez supprimer une classe CSS? Maintenant , vous pouvez utiliser: .removeClass(). Cela ouvre également la possibilité d'utiliser:.toggleClass()

(supprimez la classe si elle est présente et ajoutez-la dans le cas contraire.)

Ajouter / supprimer une classe est également moins déroutant pour changer / dépanner lorsqu'il s'agit de problèmes de mise en page (par opposition à essayer de comprendre pourquoi un style particulier a disparu.)

let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

C'est plus complexe que certaines autres solutions, mais peut offrir plus de flexibilité dans les scénarios:

1) Faites une définition de classe pour isoler (encapsuler) le style que vous souhaitez appliquer / supprimer de manière sélective. Il peut être vide (et dans ce cas, devrait probablement l'être):

.myColor {}

2) utilisez ce code, basé sur http://jsfiddle.net/kdp5V/167/ de cette réponse de gilly3 :

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

Exemple d'utilisation: http://jsfiddle.net/qvkwhtow/

Mises en garde:

• Pas largement testé.
• Ne peut pas inclure ! Important directives ou autres dans la nouvelle valeur. Toutes ces directives existantes seront perdues par cette manipulation.
• Seules les modifications ont d'abord trouvé l'occurrence d'un styleSelector. N'ajoute ni ne supprime des styles entiers, mais cela pourrait être fait avec quelque chose de plus élaboré.
• Toute valeur invalide / inutilisable sera ignorée ou générera une erreur.
• Dans Chrome (au moins), les règles CSS non locales (comme intersites) ne sont pas exposées via l'objet document.styleSheets, donc cela ne fonctionnera pas sur elles. Il faudrait ajouter un remplacement local et manipuler cela, en gardant à l'esprit le comportement "premier trouvé" de ce code.
• document.styleSheets n'est pas particulièrement convivial pour la manipulation en général, ne vous attendez pas à ce que cela fonctionne pour une utilisation agressive.

Isoler le style de cette façon est ce qu'est le CSS, même si ce n'est pas le cas. La manipulation des règles CSS n'est PAS la raison d'être de jQuery, jQuery manipule les éléments DOM et utilise des sélecteurs CSS pour le faire.

Le simple est bon marché dans le développement web. Je recommande d'utiliser une chaîne vide lors de la suppression d'un style particulier

$(element).style.attr = '  ';

Essaye ça

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');