Est-il possible de remplacer / supprimer background: none! Important avec jQuery?

J'ai un élément qui doit avoir une image d'arrière-plan, mais qu'il a été donné le style suivant dans une feuille de style que je ne suis pas en mesure d'accéder/modifier:

#an-element li {
  background: none !important;
}

Est-il possible d'annuler ce style avec jQuery? J'ai essayé d'ajouter background: inhert!important avec jQuery de deux façons: par l'ajout d'une ligne de style, et par la suppression d'un style appliqué. Ni les travaux.

Ici est un Violon illustrant le problème: http://jsfiddle.net/9bJzk/1/

Mise à JOUR: j'ai eu le tort de violon lien, s'il vous plaît regarder à nouveau.

Mise à JOUR 2: je ne peux pas modifier la feuille de style. J'ai changé le titre pour être plus clair maintenant. Je dois le faire avec jQuery que je ne peux pas contrôler l'ordre de chargement des fichiers CSS, mais peut fonctionner jQuery onload.

Mise à JOUR 3: je ne peux pas définir explicitement le 'chaton' pic (voir le violon) avec plus de précision le sélecteur CSS comme sélecteur comme #an-element .image-list li que certains sont ce qui suggère que ces images sont en train d'être écrit à la volée. Le jsFiddle était juste un exemple. Pour la rendre plus claire encore: les effets de la background: none être annulés avec PURE jQuery et PAS d'édition de feuilles de style. Merci pour coller avec ce!

source d'informationauteur Mere Development | 2013-07-24

css jquery

19
```
div { background: none !important }
div { background: red; }
```
Est transparent.
```
div { background: none !important }
div { background: red !important; }
```
Est rouge.

Un !important peut remplacer l'autre !important.

Si vous ne pouvez pas modifier le fichier CSS, vous pouvez toujours en ajouter un autre, ou une balise style dans la balise head.
4

Pourquoi ne pas travailler?
Parce que le fond CSS avec background:none!important a un #ID

Un sélecteur CSS fichier qui contient un #id toujours avoir une valeur supérieure à un .class

Si vous voulez travailler, vous avez besoin d'ajouter #id sur votre .image-list li comme ceci:
```
#an-element .image-list li {
    display: inline-block;
    background-image: url("http://placekitten.com/150/50")!important;
    padding: 1em;
    border: 1px solid blue;
}
```
résultat ici
4

Plusieurs problèmes se posent cette question.

Problème #1 - css La spécificité (comment remplacer la règle importante).

Selon les spécifications de remplacer ce sélecteur sélecteur devrait être "plus forts", ce qui signifie qu'il devrait être!important et avoir au moins 1 id, 1 classe et quelque chose d'autre - selon vous, la création de ce sélecteur est impossible(comme vous ne pouvez pas modifier le contenu de la page). Donc, la seule option possible est de mettre quelque chose dans l'élément de style qui (pourrait être fait avec la js). Remarque: le style de la règle de ont aussi !important de substituer.

Problème #2 - le fond n'est pas une propriété unique - c'est un ensemble de propriétés (voir spécification)

Si vous avez vraiment besoin de savoir quels sont les noms exacts des propriétés que vous souhaitez modifier (dans votre cas, il serait background-image)

Problème #3 - Comment faire pour supprimer la règle déjà appliquée (pour obtenir la valeur précédente)?

Malheureusement, les css ont pas de mécanisme de rejeter la règle qui se qualifier pour un élément - seulement à remplacer par "plus fort" de la règle. Donc vous ne serez pas en mesure de résoudre cette tâche, il suffit de régler la valeur à quelque chose comme 'inherit' ou 'par défaut' cause de la valeur que vous voulez voir est ni hérite de l'objet parent, ni par défaut. Pour résoudre ce problème, vous avez deux options.

1) Vous pouvez déjà savoir quelle est la valeur que vous souhaitez appliquer. Par exemple, vous pouvez trouver cette valeur basée sur le sélecteur utilisé. Dans ce cas, vous savez peut-être que pour le sélecteur ".image-liste li" vous avez besoin de background-image: url("http://placekitten.com/150/50"). Si seulement vous ce script:
```
jQuery(".image-list li").attr('style', 'background-image: url("http://placekitten.com/150/50") !important; ');
```
2) Si vous ne connaissez pas la valeur, alors vous pouvez essayer de modifier le contenu de la page dans une telle manière, que la règle que vous voulez rejeter est pas plus admissible pour l'élément, alors que la règle que vous souhaitez afficher - encore se qualifier. Dans ce cas, vous pourriez temporaire supprimer l'id d'élément conteneur. Voici le code:
```
jQuery("#an-element").attr('id', '');
var backgroundImage = jQuery(".image-list li").css('background-image');
jQuery("#an-element").attr('id', 'an-element');
jQuery(".image-list li").attr('style', 'background-image: ' + backgroundImage + ' !important; ');
```
Voici le lien pour violon http://jsfiddle.net/o3jn9mzo/

3) la troisième solution - vous pouvez générer élément qui va se qualifier pour la sélection pour trouver la valeur de la propriété - quelque chose comme cela:
```
var backgroundImage = jQuery("<div class='image-list'><li></li></div>").find('li').css('background-image');
jQuery(".image-list li").attr('style', 'background-image: ' + backgroundImage + ' !important; ');
```
P. S.: Désolé pour réponse tardive.
2

Oui c'est possible en fonction de ce que css que vous avez, il vous suffit juste de déclarer la même chose avec un arrière-plan différent, comme ce
```
ul li {
    background: none !important;
}

ul li{
    background: blue !important;
}
```
Mais vous devez vous assurer que la déclaration vient après le premier, vu que c'est en cascade.

Démo

Vous pouvez également créer une balise style dans jQuery comme ce
```
$('head').append('<style> #an-element li { background: inherit !important;} </style>');
```
Démo

Vous ne pouvez pas voir tous les changements, car il n'est pas hériter de tout arrière-plan, mais il est l'écrasement de la background: none;

Tout !important peut être remplacé par un autre !importantla normale CSS les règles de priorité continuent de s'appliquer.

Exemple:

#an-element{
    background: #F00 !important;
}
#an-element{
    background: #0F0 !important; //Makes #an-element green
}

Alors vous pourriez ajouter une style attribut (à l'aide de JavaScript/jQuery) pour remplacer le CSS

$(function () {  
    $("#an-element").attr('style', 'background: #00F !important;');
    //Makes #an-element blue
});

Voir le résultat ici

Avec un <script> à droite après le <style> qui s'applique le !importantvous devriez être en mesure de faire quelque chose comme ceci:

var lastStylesheet = document.styleSheets[document.styleSheets.length - 1];
lastStylesheet.disabled = true;

document.write('<style type="text/css">');
//Call fixBackground for each element that needs fixing
document.write('</style>');

lastStylesheet.disabled = false;

function fixBackground(el) {
    document.write('html #' + el.id + ' { background-image: ' +
        document.defaultView.getComputedStyle(el).backgroundImage +
        ' !important; }');
}

Cela dépend probablement sur ce genre de compatibilité du navigateur vous avez besoin, si.

Vous devez vous connecter pour publier un commentaire.

Démo

Démo