Stile importante!

Il titolo lo riassume praticamente.

Il foglio di stile esterno ha il seguente codice:

td.EvenRow a {
  display: none !important;
}

Ho provato a usare:

element.style.display = "inline";

e

element.style.display = "inline !important";

ma nessuno dei due funziona. È possibile sovrascrivere uno stile! Important usando javascript.

Questo è per un'estensione greasemonkey, se questo fa la differenza.

Credo che l'unico modo per farlo sia aggiungere lo stile come nuova dichiarazione CSS con il suffisso "! Important". Il modo più semplice per farlo è aggiungere un nuovo elemento <style> all'inizio del documento:

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

addNewStyle('td.EvenRow a {display:inline !important;}')

Le regole aggiunte con il metodo precedente (se usi il suffisso! Important) sovrascriveranno altri stili precedentemente impostati. Se non stai usando il suffisso, assicurati di prendere in considerazione concetti come " specificità ".

Ci sono un paio di semplici battute che puoi usare per farlo.

1) Imposta un attributo "stile" sull'elemento:

element.setAttribute('style', 'display:inline !important');

o...

2) Modificare la cssTextproprietà styledell'oggetto:

element.style.cssText = 'display:inline !important';

O faranno il lavoro.

===

BTW - se vuoi uno strumento utile per manipolare le !importantregole negli elementi, ho scritto un plugin jQuery chiamato "important": http://github.com/premasagar/important

element.styleha un setPropertymetodo che può avere la priorità come terzo parametro:

element.style.setProperty("display", "inline", "important")

Non funzionava nei vecchi IE ma dovrebbe andare bene nei browser attuali.

Basandosi sull'eccellente risposta di @ Premasagar; se non vuoi rimuovere tutti gli altri stili in linea usa questo

//accepts the hyphenated versions (i.e. not 'cssFloat')
addStyle(element, property, value, important) {
    //remove previously defined property
    if (element.style.setProperty)
        element.style.setProperty(property, '');
    else
        element.style.setAttribute(property, '');

    //insert the new style with all the old rules
    element.setAttribute('style', element.style.cssText +
        property + ':' + value + ((important) ? ' !important' : '') + ';');
}

_{Non può essere utilizzato removeProperty()perché non rimuoverà le !importantregole in Chrome.
Non può essere utilizzato element.style[property] = ''perché accetta solo camelCase in FireFox.}

Metodo migliore che ho appena scoperto: cerca di essere più specifico della pagina CSS con i tuoi selettori. Dovevo farlo oggi e funziona a meraviglia! Maggiori informazioni sul sito W3C: http://www.w3.org/TR/CSS2/cascade.html#specificity

Se desideri aggiornare / aggiungere un singolo stile nell'attributo di stile dell'elemento DOM, puoi utilizzare questa funzione:

function setCssTextStyle(el, style, value) {
  var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" +
      style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")),
    idx;
  if (result) {
    idx = result.index + result[0].indexOf(result[1]);
    el.style.cssText = el.style.cssText.substring(0, idx) +
      style + ": " + value + ";" +
      el.style.cssText.substring(idx + result[1].length);
  } else {
    el.style.cssText += " " + style + ": " + value + ";";
  }
}

style.cssText è supportato da tutti i principali browser .

Esempio di caso d'uso:

var elem = document.getElementById("elementId");
setCssTextStyle(elem, "margin-top", "10px !important");

Ecco il collegamento alla demo

Se tutto ciò che stai facendo è aggiungere CSS alla pagina, ti suggerirei di utilizzare l'addon Stylish e scrivere uno stile utente invece di uno script utente, perché uno stile utente è più efficiente e appropriato.

Vedi questa pagina con informazioni su come creare uno stile utente

https://developer.mozilla.org/en-US/docs/Web/CSS/initial

usa la proprietà iniziale in css3

 <p style="color:red!important"> 
    this text is red 
       <em style="color:initial"> 
          this text is in the initial color (e.g. black)
       </em>
    this is red again
 </p>

https://jsfiddle.net/xk6Ut/256/

Un'opzione per sovrascrivere la classe CSS in JavaScript è l'utilizzo di un ID per l'elemento di stile in modo da poter aggiornare la classe CSS

function writeStyles(styleName, cssText) {
    var styleElement = document.getElementById(styleName);
    if (styleElement) document.getElementsByTagName('head')[0].removeChild(
        styleElement);
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleName;
    styleElement.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}

..

   var cssText = '.testDIV{ height:' + height + 'px !important; }';
    writeStyles('styles_js', cssText)

Piuttosto che iniettare lo stile, se inietti una classe (ad esempio: 'show') tramite java script, funzionerà. Ma qui hai bisogno di CSS come di seguito. la regola CSS della classe aggiunta dovrebbe essere inferiore alla regola originale.

td.EvenRow a{
  display: none !important;
}

td.EvenRow a.show{
  display: block !important;
}

Lì abbiamo un'altra possibilità per rimuovere un valore di proprietà dal CSS.

Come usare il metodo di sostituzione in js. Ma devi conoscere esattamente l'ID dello stile, oppure puoi scrivere un ciclo for per rilevarlo da (conta gli stili sulla pagina, quindi controlla se qualcuno di questi "include" o "corrisponde" a un !importantvalore. E puoi contare anche - quanto li contiene, o semplicemente scrivi un metodo di sostituzione [regexp: / str / gi] globale)

Il mio è molto semplice, ma allego un jsBin, ad esempio:

https://jsbin.com/geqodeg/edit?html,css,js,output

Per prima cosa ho impostato lo sfondo del corpo in CSS per il giallo !important, quindi ho sovrascritto da JS per darkPink.

Di seguito è riportato uno snippet di codice per impostare il parametro importante per l'attributo di stile utilizzando jquery.

$.fn.setFixedStyle = function(styles){
    var s = $(this).attr("style");
    s = "{"+s.replace(/;/g,",").replace(/'|"/g,"");
    s = s.substring(0,s.length-1)+"}";
    s = s.replace(/,/g,"\",\"").replace(/{/g,"{\"").replace(/}/g,"\"}").replace(/:/g,"\":\"");
    var stOb = JSON.parse(s),st;
    if(!styles){
     $.each(stOb,function(k,v){
      stOb[k] +=" !important";
     });
    }
    else{
     $.each(styles,function(k,v){
      if(v.length>0){
        stOb[k] = v+" !important";
      }else{
        stOb[k] += " !important";  
      }
     });
    }
    var ns = JSON.stringify(stOb);
    $(this).attr("style",ns.replace(/"|{|}/g,"").replace(/,/g,";"));
};

L'utilizzo è piuttosto semplice: basta passare un oggetto contenente tutti gli attributi che si desidera impostare come importanti.

$("#i1").setFixedStyle({"width":"50px","height":""});

Ci sono due opzioni aggiuntive.

1.Per aggiungere semplicemente un parametro importante all'attributo di stile già presente, passare una stringa vuota.

2.Per aggiungere parametri importanti per tutti gli attributi presenti, non passare nulla. Imposterà tutti gli attributi come importanti.

Eccolo dal vivo in azione. http://codepen.io/agaase/pen/nkvjr