Comment annuler l'attribut CSS d'un élément à l'aide de jQuery?

93

Si je définis une valeur CSS sur un élément spécifique en utilisant:

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

Je veux pouvoir annuler cette valeur spécifique à l'élément et utiliser la valeur en cascade, dans le sens de:

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

Mais cette syntaxe ne semble pas fonctionner - est-ce possible en utilisant une autre syntaxe?

Modifier: la valeur n'est pas héritée de l'élément parent - les valeurs d'origine proviennent d'un sélecteur au niveau de l'élément. Désolé pour toute confusion!

jquery css

— cdleary
source

141

À partir de la documentation jQuery :

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é appliquée directement, que ce soit dans l'attribut de style HTML, via la .css()méthode de jQuery ou via une manipulation DOM directe de la stylepropriété. Cependant, il ne supprime pas un style qui a été appliqué avec une règle CSS dans une feuille de style ou un <style>élément.

— Glenn Moss
source

Je suis tombé sur cette question lorsque j'ai eu ce problème. Dans mon cas, je définissais l'attribut css dans un styleattribut sur la balise, donc cette méthode ne fonctionnait pas. L'application du style avec la .css()méthode plutôt que dans la balise m'a permis de le supprimer plus tard.

— Glenn Moss

14

Je pense que vous pouvez aussi faire:

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

C'est ce que je faisais il y a longtemps pour la displaypropriété en plain-old-javascript pour afficher / masquer un champ.

— FryGuy
source

4

En fait, la syntaxe que je pensais incorrecte (avec null) semble fonctionner - mon sélecteur était juste mal formé et ne donnait donc aucun élément. Oh!

— cdleary
source

21

Depuis jquery 1.4.3 css(..., null)ne fonctionne pas et css(..., '')devrait être utilisé à la place - bugs.jquery.com/ticket/7233

— Tim Sylvester

3

Essaye ça:

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

— HectorMac
source

1

L'héritage n'est malheureusement pas le comportement que je recherche: "la propriété prend la même valeur calculée que la propriété du parent de l'élément" de w3.org/TR/CSS2/cascade.html

— cdleary

Plus vraisemblablement «initial» que «hériter». «Hériter» s'adapte du parent, «Initial» fait ce que le mot dit.

— Chris S.

0

Pour ce que ça vaut, cela semble ne pas fonctionner dans IE 8 pour `` filtre '', j'ai dû utiliser ceci (dans le rappel fadeIn):

$(this).attr('style', $(this).attr('style').replace(/\bfilter:\s*;*/, ''));

De toute évidence, j'avais besoin de supprimer une déclaration de filtre en ligne vide pour que le CSS puisse prendre effet; il y avait d'autres règles en ligne, donc je ne pouvais pas simplement supprimer l'attribut style.

— Brandon Hill
source

-2

Si cela peut aider, j'ajoute un problème avec un guillemet double:

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

ne fonctionne pas pendant

$('#element').css('border-color', '');

travaux

— merlintintin
source