Style important

Question

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.

Answer 1

Il ya un couple de simple one-liners vous pouvez utiliser pour ce faire.

1) Définir un "style" de l'attribut de l'élément:

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

ou...

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

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

Soit faire le travail.

===

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

Answer 2

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

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

Cela ne fonctionne pas dans IE, mais cela devrait convenir à votre script greasemonkey.

Answer 3

Je crois que la seule façon de le faire pour ajouter le style CSS de nouveaux déclaration auprès de la"!important " suffixe. La façon la plus simple de le faire est d'ajouter une nouvelle <style> élément à la tête de 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 !important suffixe) le remplacement d'autres précédemment défini le style. Si vous n'êtes pas en utilisant le suffixe alors assurez-vous de prendre des concepts comme la 'spécificité' en compte.

Answer 4

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.}

Answer 5

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