web-dev-qa-db-fra.com

Je ne parviens pas à injecter un style avec une règle "! Important"

J'ai essayé d'injecter un style en utilisant ce code:

document.body.style.color='green!important';

Par la cascade CSS ref , en appliquant le !important règle je peux l'emporter sur l'origine et la spécificité.

J'ai essayé d'injecter cela en utilisant Firefox Firebug dans www.google.com mais pas de chance.

Comment injecter une couleur de premier plan avec un !important règle?

javascriptcssfirefoxdom
46
android_baby

Selon la spécification, si vous voulez définir la priorité, pas seulement la valeur, vous devez utiliser setProperty, comme ceci:

document.body.style.setProperty ("color", "green", "important");
98
Boris Zbarsky
element.style.cssText = 'color:green !important';

devrait fonctionner pour vous.

8
Jayachandran

toutes les réponses sont excellentes, mais elles ont toutes supposé que le value de l'attribut est fixed , et sinon

regarde ma solution

this.style.setProperty("color", $(this).css('color'), "important");

au lieu de hand writing la valeur, je l'ai obtenue en utilisant jquery $(this).css('attr')

2
Basheer AL-MOMANI

style.cssText est le seul moyen d'ajouter! important.

<script>
   document.body.style.cssText='color: red !important;'
</script>
1
VISHNU Radhakrishnan

Je voudrais poser qu'il ne fonctionne peut-être pas tant en raison d'une erreur de code (à l'exception de l'espace) mais plus parce que la modification de la balise body n'est pas un élément, une classe ou ce que vous avez à créer pour créer l'élément souhaité effet.

Comme par exemple, le texte de la page d'un résultat de recherche a une classe de "st". tous les résultats de la recherche sont chacun encapsulés dans un <li> tag.

Donc, du code à cet effet pourrait ressembler à ceci:

var arr = document.getElementsByClassName('st');
for(i=0; i<arr.length; i++){
    arr[i].style.color="green";
}
1
Ahren Bader-Jarvis

Utilisez uniquement ceci:

document.body.style.color="green";

vous ne pouvez pas avoir à utiliser important de cette façon. Quoi qu'il en soit, comme l'a souligné Fatal, cela ne fonctionnera pas, lorsqu'il y a une règle directement importante dans la feuille de style CSS, que vous devez remplacer.

De cette façon, vous devez créer dynamiquement une feuille de style et l'ajouter à l'intérieur de head:

function addNewStyle(newStyle) {
   var styleElement = document.getElementById('styles_js');
   if (!styleElement) {
       styleElement = document.createElement('style');
       styleElement.type = 'text/css';
       styleElement.id = 'styles_js';
       document.getElementsByTagName('head')[0].appendChild(styleElement);
   }
   styleElement.appendChild(document.createTextNode(newStyle));
}

Ensuite, vous pouvez mettre à jour le style comme ça

addNewStyle('body {color:green !important;}')
1
Marian Bazalik