Domanda Non riesco a iniettare uno stile con una regola "! Importante"


Ho provato a iniettare uno stile usando questo codice:

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

Per il CSS cascade ref, applicando il !important la regola I può superare l'origine e la specificità.

Ho provato a iniettarlo usando Firefox Firebug su www.google.com, ma senza fortuna.

Come faccio a iniettare un colore in primo piano con un !important regola?


44
2017-10-27 14:39


origine


risposte:


Per le specifiche, se si desidera impostare la priorità, non solo il valore, è necessario utilizzare setProperty, così:

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

91
2017-10-27 17:05



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

dovrebbe funzionare per voi


8
2017-10-02 13:43



tutte le risposte sono grandi ma hanno tutte assunto il value dell'attributo è fixed,, cosa succede se non

dai un'occhiata alla mia soluzione

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

invece di hand writing il valore, l'ho preso usando jquery $(this).css('attr')


2
2017-10-18 06:38



Mi piacerebbe pensare che potrebbe non funzionare non tanto a causa di errori nel codice (eccetto lo spazio), ma più perché la modifica del tag body non è un elemento, una classe o un elemento abbastanza specifici da creare effetto.

Ad esempio, il testo di una pagina di un risultato di ricerca ha una classe di "st". tutti i risultati di ricerca sono incapsulati ciascuno in un file <li>  etichetta.

Quindi un codice a tale effetto potrebbe assomigliare a questo:

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

1
2017-10-27 15:37



Usa solo questo:

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

non puoi dover usare in questo modo importanti. Comunque, come ha sottolineato Fatal, questo non funzionerà, quando c'è una regola direttamente importante nel foglio di stile CSS, che è necessario sovrascrivere.

In questo modo, devi dinamicamente creare un foglio di stile e pubblicarlo all'interno del capo:

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

Quindi puoi aggiornare lo stile proprio così

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

1
2017-10-27 15:06



style.cssText è l'unico modo per aggiungere! important.

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

1
2017-08-22 10:04