Je n'arrive pas à injecter un style avec une règle "!important"

Question

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

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

Selon la référence CSS cascade , en appliquant la !important , je peux l'emporter sur l'origine et la spécificité.

J'ai essayé d'injecter cela à l'aide de Firefox Firebug dans www.google.com mais sans succès.

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

Answer 1

Selon les spécifications, si vous souhaitez définir la priorité, pas seulement la valeur, vous devez utiliser setProperty , comme ceci :

 document.body.style.setProperty ("color", "green", "important");

Answer 2

element.style.cssText = 'color:green !important';

devrait fonctionner pour vous.

Answer 3

toutes les réponses sont excellentes mais elles supposent toutes 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')

Answer 4

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

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

Answer 5

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 Fatal l'a souligné, cela ne fonctionnera pas, lorsqu'il existe 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 dans la tête :

 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;}')