Priorité! Style important

Le titre résume assez bien la situation.

La feuille de style externe a le code suivant:

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

J'ai essayé d'utiliser:

element.style.display = "inline";

et

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

mais ni l'un ni l'autre ne fonctionne. Est-il possible de remplacer un style! Important en utilisant javascript.

Ceci est pour une extension greasemonkey, si cela fait une différence.

Je pense que le seul moyen de le faire est d'ajouter le style en tant que nouvelle déclaration CSS avec le suffixe «! Important». Le moyen le plus simple de le faire est d'ajouter un nouvel élément <style> à l'en-tête du document:

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

Les règles ajoutées avec la méthode ci-dessus (si vous utilisez le suffixe! Important) remplaceront les autres styles précédemment définis. Si vous n'utilisez pas le suffixe, assurez-vous de prendre en compte des concepts tels que la « spécificité ».

Il y a quelques simples one-liners que vous pouvez utiliser pour ce faire.

1) Définissez un attribut "style" sur l'élément:

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

ou...

2) Modifiez la cssTextpropriété de l' styleobjet:

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

L'un ou l'autre fera le travail.

===

BTW - si vous voulez un outil utile pour manipuler les !importantrègles dans les éléments, j'ai écrit un plugin jQuery appelé "important": http://github.com/premasagar/important

element.stylea une setPropertyméthode qui peut prendre la priorité comme troisième paramètre:

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

Cela ne fonctionnait pas dans les anciens IE, mais cela devrait convenir aux navigateurs actuels.

S'appuyant sur l'excellente réponse de @ Premasagar; si vous ne souhaitez pas supprimer tous les autres styles en ligne, utilisez ceci

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

_{Impossible d'utiliser, removeProperty()car il ne supprimera pas les !importantrègles dans Chrome.
Ne peut pas utiliser element.style[property] = ''car il n'accepte que camelCase dans FireFox.}

Meilleure méthode que je viens de découvrir: essayez d'être plus précis que la page CSS avec vos sélecteurs. Je devais juste le faire aujourd'hui, et cela fonctionne comme un charme! Plus d'informations sur le site du W3C: http://www.w3.org/TR/CSS2/cascade.html#specificity

Si vous souhaitez mettre à jour / ajouter un style unique dans l'attribut de style d'élément DOM, vous pouvez utiliser cette fonction:

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 est pris en charge pour tous les principaux navigateurs .

Exemple de cas d'utilisation:

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

Voici le lien vers la démo

Si tout ce que vous faites est d'ajouter css à la page, je vous suggère d'utiliser l'addon Stylish et d'écrire un style utilisateur au lieu d'un script utilisateur, car un style utilisateur est plus efficace et approprié.

Voir cette page avec des informations sur la création d'un style utilisateur

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

utiliser la propriété initiale 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/

Une option pour remplacer la classe CSS dans JavaScript consiste à utiliser un ID pour l'élément de style afin que nous puissions mettre à jour 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)

Plutôt que d'injecter du style, si vous injectez une classe (par exemple: 'show') via un script java, cela fonctionnera. Mais ici, vous avez besoin de css comme ci-dessous. la règle css de classe ajoutée doit être inférieure à votre règle d'origine.

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

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

Là, nous avons une autre possibilité de supprimer une valeur de propriété du CSS.

Comme utiliser la méthode replace dans js. Mais vous devez connaître exactement l'ID du style, ou vous pouvez écrire une boucle for pour le détecter par (compter les styles sur la page, puis vérifier si l'un de ces 'inclut' ou 'correspond' à une !importantvaleur. & Vous pouvez compter aussi - combien les contient, ou simplement écrire une méthode de remplacement globale [regexp: / str / gi])

Le mien est très simple, mais j'attache un jsBin, par exemple:

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

J'ai d'abord défini l'arrière-plan du corps en CSS pour le jaune !important, puis j'ai remplacé par JS pour darkPink.

Vous trouverez ci-dessous un extrait de code pour définir le paramètre important de l'attribut style à l'aide de 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'utilisation est assez simple: il suffit de passer un objet contenant tous les attributs que vous souhaitez définir comme importants.

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

Il existe deux options supplémentaires.

1.Pour ajouter simplement un paramètre important à l'attribut de style déjà présent, passez une chaîne vide.

2. Pour ajouter des paramètres importants pour tous les attributs présents, ne passez rien. Cela définira tous les attributs comme importants.

Le voici en direct en action. http://codepen.io/agaase/pen/nkvjr