¡Estilo primordial!

El título lo resume más o menos.

La hoja de estilo externa tiene el siguiente código:

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

He intentado usar:

element.style.display = "inline";

y

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

Pero tampoco funciona. ¿Es posible anular un estilo! Importante usando javascript.

Esto es para una extensión greasemonkey, si eso hace la diferencia.

Creo que la única forma de hacerlo es agregar el estilo como una nueva declaración CSS con el sufijo '! Important'. La forma más fácil de hacer esto es agregar un nuevo elemento <style> al encabezado 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;}')

Las reglas agregadas con el método anterior anularán (si utiliza el sufijo! Important) otro estilo previamente establecido. Si no está utilizando el sufijo, asegúrese de tener en cuenta conceptos como ' especificidad '.

Hay un par de frases simples que puedes usar para hacer esto.

1) Establezca un atributo "estilo" en el elemento:

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

o...

2) Modificar la cssTextpropiedad del styleobjeto:

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

Cualquiera de los dos hará el trabajo.

===

Por cierto, si desea una herramienta útil para manipular !importantreglas en elementos, he escrito un complemento jQuery llamado "importante": http://github.com/premasagar/important

element.styletiene un setPropertymétodo que puede tomar la prioridad como tercer parámetro:

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

No funcionaba en viejos IE, pero debería estar bien en los navegadores actuales.

Aprovechando la excelente respuesta de @Premasagar; si no desea eliminar todos los demás estilos en línea, use esto

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

_{No se puede usar removeProperty()porque no eliminará las !importantreglas en Chrome.
No se puede usar element.style[property] = ''porque solo acepta camelCase en Firefox.}

Mejor método que acabo de descubrir: intenta ser más específico que la página CSS con tus selectores. ¡Solo tenía que hacer esto hoy, y funciona de maravilla! Más información en el sitio del W3C: http://www.w3.org/TR/CSS2/cascade.html#specificity

Si desea actualizar / agregar un estilo único en el atributo de estilo Elemento DOM, puede usar esta función:

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 es compatible con todos los principales navegadores .

Ejemplo de caso de uso:

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

Aquí hay un enlace a la demostración

Si todo lo que está haciendo es agregar css a la página, le sugiero que use el complemento Elegante y escriba un estilo de usuario en lugar de un script de usuario, porque un estilo de usuario es más eficiente y apropiado.

Consulte esta página con información sobre cómo crear un estilo de usuario.

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

usar propiedad inicial en 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/

Una opción para anular la clase CSS en JavaScript es usar una ID para el elemento de estilo para que podamos actualizar la clase 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)

En lugar de inyectar estilo, si inyecta una clase (por ejemplo: 'show') a través del script java, funcionará. Pero aquí necesitas css como a continuación. la regla de clase CSS añadida debe estar por debajo de su regla original.

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

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

Allí tenemos otra posibilidad para eliminar un valor de propiedad del CSS.

Como usar el método replace en js. Pero debe saber exactamente la ID del estilo, o puede escribir un bucle for para detectarlo mediante (cuente los estilos en la página, luego verifique si alguno de esos 'incluye' o 'coincide' con un !importantvalor. Y puede contar también: cuánto los contiene, o simplemente escriba un método de reemplazo global [regexp: / str / gi])

El mío es muy simple, pero adjunto un jsBin, por ejemplo:

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

Primero configuré el fondo del cuerpo en CSS para amarillo !important, luego anulé JS para darkPink.

A continuación se muestra un fragmento de código para establecer el parámetro importante para el atributo de estilo 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,";"));
};

El uso es bastante simple. Simplemente pase un objeto que contenga todos los atributos que desea establecer como importantes.

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

Hay dos opciones adicionales.

Para agregar un parámetro importante al atributo de estilo ya presente, pase una cadena vacía.

2.Para agregar parámetros importantes para todos los atributos presentes, no pase nada. Establecerá todos los atributos como importantes.

Aquí está en vivo en acción. http://codepen.io/agaase/pen/nkvjr