Substituindo! Estilo importante

O título resume bastante.

A folha de estilos externa possui o seguinte código:

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

Eu tentei usar:

element.style.display = "inline";

e

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

mas nem funciona. É possível substituir um estilo importante usando javascript.

Isto é para uma extensão greasemonkey, se isso faz diferença.

Acredito que a única maneira de fazer isso é adicionar o estilo como uma nova declaração CSS com o sufixo '! Important'. A maneira mais fácil de fazer isso é anexar um novo elemento <style> ao cabeçalho do 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;}')

As regras adicionadas com o método acima substituirão (se você usar o sufixo! Important) outro estilo definido anteriormente. Se você não estiver usando o sufixo, certifique-se de levar em consideração conceitos como ' especificidade '.

Existem algumas linhas simples que você pode usar para fazer isso.

1) Defina um atributo "style" no elemento:

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

ou...

2) Modifique a cssTextpropriedade do styleobjeto:

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

Qualquer um fará o trabalho.

===

BTW - se você deseja uma ferramenta útil para manipular !importantregras em elementos, escrevi um plugin jQuery chamado "important": http://github.com/premasagar/important

element.stylepossui um setPropertymétodo que pode ter a prioridade como um terceiro parâmetro:

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

Não funcionou nos IEs antigos, mas deve funcionar bem nos navegadores atuais.

Com base na excelente resposta de @ Premasagar; se você não quiser remover todos os outros estilos embutidos, use este

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

_{Não é possível usar removeProperty()porque não remove !importantregras no Chrome.
Não pode ser usado element.style[property] = ''porque ele aceita apenas camelCase no FireFox.}

Método melhor que acabei de descobrir: tente ser mais específico que a página CSS com seus seletores. Eu só tinha que fazer isso hoje, e funciona como um encanto! Mais informações no site do W3C: http://www.w3.org/TR/CSS2/cascade.html#specificity

Se você deseja atualizar / adicionar um estilo único no atributo de estilo do elemento DOM, pode usar esta função:

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 é suportado para todos os principais navegadores .

Exemplo de caso de uso:

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

Aqui está o link para a demonstração

Se tudo o que você está fazendo é adicionar css à página, sugiro que você use o complemento Stylish e escreva um estilo de usuário em vez de um script de usuário, porque um estilo de usuário é mais eficiente e apropriado.

Consulte esta página com informações sobre como criar um estilo de usuário

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

usar propriedade inicial em 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/

Uma opção para substituir a classe CSS no JavaScript é usar um ID para o elemento style, para que possamos atualizar a 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)

Em vez de injetar estilo, se você injetar uma classe (por exemplo: 'show') através de um script java, ela funcionará. Mas aqui você precisa de css como abaixo. a regra css da classe adicionada deve estar abaixo da regra original.

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

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

Lá temos outra possibilidade de remover um valor da propriedade do CSS.

Como usar o método de substituição em js. Mas você precisa saber exatamente o ID do estilo ou pode escrever um loop for para detectá-lo por (conte os estilos na página e verifique se algum deles 'inclui' ou 'corresponde' a um !importantvalor). também - quanto os contém, ou simplesmente escreva um método global de substituição [regexp: / str / gi]

O meu é muito simples, mas anexo um jsBin, por exemplo:

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

Primeiro, defino o plano de fundo do corpo em CSS para amarelo !important, depois substituí por JS para darkPink.

Abaixo está um trecho de código para definir o parâmetro importante para o atributo style usando 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,";"));
};

O uso é bem simples: basta passar um objeto contendo todos os atributos que você deseja definir como importantes.

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

Existem duas opções adicionais.

1.Para adicionar um parâmetro importante ao atributo de estilo já presente, passe uma string vazia.

2.Para adicionar parâmetros importantes para todos os atributos presentes, não passe nada. Ele definirá todos os atributos como importantes.

Aqui é viver em ação. http://codepen.io/agaase/pen/nkvjr