web-dev-qa-db-fra.com

Style important

Title résume à peu près tout.

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 fonctionne. Est-il possible de remplacer un style! Important en utilisant javascript?.

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

javascriptcss
107
Enrico

Je crois que la seule façon de faire cela consiste à ajouter le style en tant que nouvelle déclaration CSS avec le suffixe «! Important». Pour ce faire, la méthode la plus simple consiste à 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 remplaceront (si vous utilisez le suffixe! Important) les autres styles définis précédemment. Si vous n'utilisez pas le suffixe, assurez-vous de prendre en compte des concepts tels que ' specificity '.

47
James

Pour ce faire, vous pouvez utiliser quelques lignes simples.

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

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

ou...

2) Modifiez la propriété cssText de l'objet style:

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

Soit fera le travail.

===

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

195
Premasagar

element.style a une méthode setProperty qui peut prendre la priorité en tant que troisième paramètre:

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

Cela ne fonctionnait pas dans les anciens IE mais cela devrait marcher dans les navigateurs actuels.

142
sth

Vous pouvez utiliser: 

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

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

4
Evstati Zarkov

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

//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 règles !important dans Chrome.
Impossible d'utiliser element.style[property] = '' car il n'accepte que camelCase dans FireFox .

3
Hashbrown

Si vous souhaitez mettre à jour/ajouter un style unique dans l'attribut de style É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 par tous les principaux navigateurs .

Exemple de cas d'utilisation:

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

Voici un lien vers la démo

1
Marek Skrzyniarz

Meilleure méthode que je viens de découvrir: essayez d’être plus spécifique que la page CSS avec vos sélecteurs. Je devais faire cela aujourd'hui, et ça marche à merveille! Plus d'informations sur le site du W3C: http://www.w3.org/TR/CSS2/cascade.html#specificity

1
Nuck

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>
0
zloctb

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

Une option pour remplacer la classe CSS en JavaScript consiste à utiliser un ID pour l'élément style afin de pouvoir 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)
0
Razan Paul

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 de classe css ajoutée doit être inférieure à la règle d'origine.

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

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

Si tout ce que vous faites est d’ajouter des CSS à la page, je vous suggère d’utiliser le module Stylish et d’écrire un style utilisateur au lieu d’un script utilisateur, car un style utilisateur est plus efficace et plus approprié.

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

0
erikvold