jQuery: comment supprimer un style incorporé d'un élément?

Question

J'ai un conteneur de tabulation en utilisant <li> comme définition d'onglet (pratique courante). Le style <li> est associé au fichier style.css. Cela a une couleur de fond et une image de fond.

Maintenant, chaque conteneur sous les onglets contenant <li> dans le contenu aura la définition de feuille de style (image d'arrière-plan et couleur).

Comment le remplacer dans la zone de contenu à l'aide de jQuery? Je ne peux pas modifier le contenu car il est géré par la base de données et utilisé ailleurs dans l'application.

Merci!

Answer 1

Vous pouvez remplacer le CSS en spécifiant des règles plus spécifiques - ce qui est gênant parce que vous devez annuler la définition des règles qui ont été spécifiées avant, mais c'est possible.

Par exemple, si vous avez:

li { 
    height: 100px; 
} 

Vous pouvez désinitialiser avec:

li li { 
    height: auto; 
} 

Une meilleure façon serait de vous assurer que les informations de style pour les onglets ne fonctionne que sur les onglets. Si vous ajoutez une classe à l'onglet-li vous pouvez simplement mettre

li.tab { 
    height: 100px; 
} 

et il ne sera pas influencer les éléments li sous l'onglet. De cette façon, vous n'avez pas besoin de changer le contenu (j'espère que les onglets ne font pas partie de ce contenu) et vous n'avez pas besoin de javascript pour annuler les choses.

Answer 2

Je ne l'ai pas essayé, mais ma meilleure estimation serait d'ajouter une étiquette <div> au <li> et charger le contenu dans le <div>. Ensuite, créez une définition pour le <div> en spécifiant background:none. Cela devrait ensuite tomber en cascade sur le contenu chargé.

Answer 3

Vous n'avez pas vraiment besoin de jQuery pour cela, vous pouvez simplement ajouter une déclaration CSS dans votre hiérarchie qui supprime la couleur et l'image d'arrière-plan pour les li li. Par exemple,

.tabs li { background-color: red; background-image: url(something.jpg) } 

.tabs li div li { background-color: transparent; background-image: none; } 

Pour ce faire, avec jQuery,

$(".tabs > li div li").css("background-color", "transparent"); 
$(".tabs > li div li").css("background-image", "none");