web-dev-qa-db-fra.com

Comment puis-je 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 couleur (lorsque la souris passe 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 style inline background-color ajouté par jQuery.

javascriptjquerycss
787
Alex

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

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

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

removeAttr( 'style' );

Cela suppose que vous souhaitiez supprimer tout style dynamique et revenir au style de la feuille de style.

513
ThinkingStiff

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

1. Définition de la propriété CSS sur sa valeur par défaut (initiale)

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

Voir la valeur initiale pour la propriété CSS dans MDN . Ici, la valeur par défaut est transparent. Vous pouvez également utiliser inherit pour plusieurs propriétés CSS afin d'hériter de l'attribut de son parent. En CSS3/CSS4, vous pouvez également utiliser initial , revert ou unset mais ces mots clés peuvent avoir un support limité du navigateur.

2. Suppression de la propriété CSS

Une chaîne vide supprime la propriété CSS, c.-à-d.

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

Mais attention, comme spécifié dans la documentation jQuery .css () , cela supprime la propriété, mais des problèmes de compatibilité avec IE8 existent pour certaines propriétés abrégées CSS, notamment background.

Définition de 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 s'il a déjà été appliqué directement, que ce soit dans le style HTML attribut, via la méthode .css () de jQuery, ou via le DOM direct manipulation de la propriété de style. Cependant, cela ne supprime pas un style qui a été appliqué avec une règle CSS dans une feuille de style ou élément. Avertissement: une exception notable est que, pour IE 8 et les versions antérieures, supprimer une propriété abrégée telle qu'une bordure ou un arrière-plan sera supprime 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")
162
KrisWebDev

J'ai eu le moyen de supprimer un attribut de style avec du JavaScript pur, juste pour vous faire connaître le chemin du JavaScript pur 

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

l’une de ces fonctions jQuery devrait fonctionner:

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

Cela supprimera la balise complète: 

  $("body").removeAttr("style");
16
SURJEET SINGH Bisht

Essaye ça:

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

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

Merci

6
uihelp

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

Juste en utilisant:

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

ou 

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

Utiliser 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 également supprimer le CSS défini dans ses classes: 

$(<mySelector>).removeCss(true);
5
Abdennour TOUMI

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 de style CSS et que vous avez un attribut dans un élément HTML, vous pouvez utiliser:

$("#element").attr("style.background-color",color);
5
Luis
let el = document.querySelector(element)
let styles = el.getAttribute('style')

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

Pourquoi ne pas créer le style que vous souhaitez supprimer d'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 si ce n'est pas le cas.) 

Ajouter/supprimer une classe est également moins déroutant à modifier/résoudre lorsque des problèmes de mise en page se posent (au lieu d'essayer de comprendre pourquoi un style particulier a disparu) 

1
Neil Girardi

Celui-ci travaille aussi !!

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

Essaye ça

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

Simple n'est pas cher en développement web. Je recommande d'utiliser une chaîne vide lors de la suppression d'un style particulier 

$(element).style.attr = '  ';
0
Victor Michael

2018

il y a une API native pour cela 

element.style.removeProperty(propery)
0
pery mimon

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

1) Créez 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 devrait probablement l'être dans ce cas):

.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 testé de manière approfondie.
  • Impossible d'inclure ! Important ou d'autres directives dans la nouvelle valeur. De telles directives existantes seront perdues lors de cette manipulation.
  • Seuls les changements qui ont été trouvés pour la première fois dans 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 provoquera une erreur.
  • Dans Chrome (au moins), les règles CSS non locales (comme dans plusieurs sites) ne sont pas exposées via l'objet document.styleSheets. Par conséquent, cela ne fonctionnera pas. Il faudrait ajouter un remplacement local et le manipuler, 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 un usage agressif.

CSS, c’est ce qu’est le style, même si ce n’est pas le cas. La manipulation des règles CSS n’est PAS l’objet de jQuery, jQuery manipule des éléments DOM et utilise des sélecteurs CSS pour le faire.

0
dkloke