J'ai du mal à appliquer un style qui est !important . J'ai essayé:

$("#elem").css("width", "100px !important");

Cela ne fait rien ; aucun style de largeur n'est appliqué. Existe-t-il une façon jQuery d'appliquer un tel style sans avoir à l'écraser cssText(ce qui signifierait que je devrais d'abord l'analyser, etc.)?

Modifier : je dois ajouter que j'ai une feuille de style avec un !importantstyle que j'essaie de remplacer avec un !importantstyle en ligne, donc en utilisant.width() et similaire ne fonctionne pas car elle est remplacée par mon !importantstyle externe .

De plus, la valeur qui remplacera la valeur précédente est calculée , donc je ne peux pas simplement créer un autre style externe.

Le problème est dû au fait que jQuery ne comprend pas l' !importantattribut et, en tant que tel, ne parvient pas à appliquer la règle.

Vous pourrez peut-être contourner ce problème et appliquer la règle en vous y référant via addClass():

.importantRule { width: 100px !important; }

$('#elem').addClass('importantRule');

Ou en utilisant attr():

$('#elem').attr('style', 'width: 100px !important');

Cependant, cette dernière approche annulerait toutes les règles de style en ligne précédemment définies. À utiliser donc avec précaution.

Bien sûr, il y a un bon argument que la méthode de @Nick Craver est plus facile / plus sage.

L' attr()approche ci-dessus a été légèrement modifiée pour conserver la stylechaîne / les propriétés d'origine, et modifiée comme suggéré par falko dans un commentaire:

$('#elem').attr('style', function(i,s) { return (s || '') + 'width: 100px !important;' });

Je pense avoir trouvé une vraie solution. Je l'ai transformé en une nouvelle fonction:

jQuery.style(name, value, priority);

Vous pouvez l'utiliser pour obtenir des valeurs avec .style('name')tout comme .css('name'), obtenir la CSSStyleDeclaration avec .style(), et également définir des valeurs - avec la possibilité de spécifier la priorité comme «importante». Regardez ça .

Démo

var div = $('someDiv');
console.log(div.style('color'));
div.style('color', 'red');
console.log(div.style('color'));
div.style('color', 'blue', 'important');
console.log(div.style('color'));
console.log(div.style().getPropertyPriority('color'));

Voici la sortie:

null
red
blue
important

La fonction

(function($) {    
  if ($.fn.style) {
    return;
  }

  // Escape regex chars with \
  var escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
  };

  // For those who need them (< IE 9), add support for CSS functions
  var isStyleFuncSupported = !!CSSStyleDeclaration.prototype.getPropertyValue;
  if (!isStyleFuncSupported) {
    CSSStyleDeclaration.prototype.getPropertyValue = function(a) {
      return this.getAttribute(a);
    };
    CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) {
      this.setAttribute(styleName, value);
      var priority = typeof priority != 'undefined' ? priority : '';
      if (priority != '') {
        // Add priority manually
        var rule = new RegExp(escape(styleName) + '\\s*:\\s*' + escape(value) +
            '(\\s*;)?', 'gmi');
        this.cssText =
            this.cssText.replace(rule, styleName + ': ' + value + ' !' + priority + ';');
      }
    };
    CSSStyleDeclaration.prototype.removeProperty = function(a) {
      return this.removeAttribute(a);
    };
    CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) {
      var rule = new RegExp(escape(styleName) + '\\s*:\\s*[^\\s]*\\s*!important(\\s*;)?',
          'gmi');
      return rule.test(this.cssText) ? 'important' : '';
    }
  }

  // The style function
  $.fn.style = function(styleName, value, priority) {
    // DOM node
    var node = this.get(0);
    // Ensure we have a DOM node
    if (typeof node == 'undefined') {
      return this;
    }
    // CSSStyleDeclaration
    var style = this.get(0).style;
    // Getter/Setter
    if (typeof styleName != 'undefined') {
      if (typeof value != 'undefined') {
        // Set style property
        priority = typeof priority != 'undefined' ? priority : '';
        style.setProperty(styleName, value, priority);
        return this;
      } else {
        // Get style property
        return style.getPropertyValue(styleName);
      }
    } else {
      // Get CSSStyleDeclaration
      return style;
    }
  };
})(jQuery);

Voir ceci pour des exemples de lecture et de définition des valeurs CSS. Mon problème était que j'avais déjà mis!important la largeur dans mon CSS pour éviter les conflits avec d'autres CSS de thème, mais toutes les modifications que j'ai apportées à la largeur dans jQuery ne seraient pas affectées car elles seraient ajoutées à l'attribut style.

Compatibilité

Pour définir la priorité à l'aide de la setPropertyfonction, cet article indique que IE 9+ et tous les autres navigateurs sont pris en charge. J'ai essayé avec IE 8 et il a échoué, c'est pourquoi j'ai intégré le support dans mes fonctions (voir ci-dessus). Il fonctionnera sur tous les autres navigateurs utilisant setProperty, mais il aura besoin de mon code personnalisé pour fonctionner dans <IE 9.

Vous pouvez définir la largeur directement en utilisant .width()comme ceci:

$("#elem").width(100);

Mis à jour pour les commentaires: vous avez également cette option, mais elle remplacera tous les css sur l'élément, donc pas sûr qu'elle soit plus viable:

$('#elem').css('cssText', 'width: 100px !important');

const elem = $("#elem");
elem[0].style.removeAttribute('width');
elem[0].style.setProperty('width', '100px', 'important');

Remarque: L'utilisation de Chrome peut renvoyer une erreur telle que:

elem [0] .style.removeAttribute n'est pas une fonction

Changer la ligne pour utiliser la .removePropertyfonction de manière à elem[0].style.removeProperty('width');résoudre le problème.

La réponse de David Thomas décrit une manière d'utiliser $('#elem').attr('style', …), mais avertit que son utilisation supprimera les styles précédemment définis dans l' styleattribut. Voici une façon d'utiliser attr()sans ce problème:

var $elem = $('#elem');
$elem.attr('style', $elem.attr('style') + '; ' + 'width: 100px !important');

En tant que fonction:

function addStyleAttribute($element, styleAttribute) {
    $element.attr('style', $element.attr('style') + '; ' + styleAttribute);
}

addStyleAttribute($('#elem'), 'width: 100px !important');

Voici une démo JS Bin .

Après avoir lu d'autres réponses et expérimenté, voici ce qui fonctionne pour moi:

$(".selector")[0].style.setProperty( 'style', 'value', 'important' );

Cependant, cela ne fonctionne pas dans IE 8 et les versions antérieures.

Tu peux le faire:

$("#elem").css("cssText", "width: 100px !important;");

Utiliser "cssText" comme nom de propriété et tout ce que vous voulez ajouter au CSS comme valeur.

Vous pouvez y parvenir de deux manières:

$("#elem").prop("style", "width: 100px !important"); // this is not supported in chrome
$("#elem").attr("style", "width: 100px !important");

Il n'est pas nécessaire d'aller à la complexité de la réponse de @ AramKocharyan, ni à la nécessité d'insérer dynamiquement des balises de style.

Remplacez simplement le style, mais vous n'avez rien à analyser, pourquoi le feriez-vous?

// Accepts the hyphenated versions (i.e. not 'cssFloat')
function 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 accepte uniquement camelCase dans Firefox.}

Vous pourriez probablement raccourcir cela avec jQuery, mais cette fonction vanilla fonctionnera sur les navigateurs modernes, Internet Explorer 8, etc.

Voici ce que j'ai fait après avoir rencontré ce problème ...

var origStyleContent = jQuery('#logo-example').attr('style');
jQuery('#logo-example').attr('style', origStyleContent + ';width:150px !important');

Cette solution ne remplace aucun des styles précédents, elle applique simplement celui dont vous avez besoin:

var heightStyle = "height: 500px !important";
if ($("foo").attr('style')) {
  $("foo").attr('style', heightStyle + $("foo").attr('style').replace(/^height: [-,!,0-9,a-z, A-Z, ]*;/,''));
else {
  $("foo").attr('style', heightStyle);
}

Si ce n'est pas si pertinent et que vous avez affaire à un élément #elem, vous pouvez changer son identifiant en quelque chose d'autre et le styler comme vous le souhaitez ...

$('#elem').attr('id', 'cheaterId');

Et dans votre CSS:

#cheaterId { width: 100px;}

Au lieu d'utiliser la css()fonction, essayez la addClass()fonction:

  <script>
  $(document).ready(function() {
    $("#example").addClass("exampleClass");
  });
  </script>

  <style>
  .exampleClass{
    width:100% !important;
    height:100% !important;
  }
  </style>

La solution la plus simple et la meilleure pour moi à ce problème était d'utiliser simplement addClass () au lieu de .css () ou .attr ().

Par exemple:

$('#elem').addClass('importantClass');

Et dans votre fichier CSS:

.importantClass {
    width: 100px !important;
}

Pour info, cela ne fonctionne pas car jQuery ne le supporte pas. Un ticket a été déposé en 2012 ( # 11173 $ (elem) .css ("propriété", "valeur! Important") échoue ) qui a finalement été fermé en tant que WONTFIX.

La plupart de ces réponses sont désormais obsolètes, la prise en charge d'IE7 n'est pas un problème.

La meilleure façon de le faire qui prend en charge IE11 + et tous les navigateurs modernes est:

const $elem = $("#elem");
$elem[0].style.setProperty('width', '100px', 'important');

Ou si vous le souhaitez, vous pouvez créer un petit plugin jQuery qui fait cela. Ce plugin correspond étroitement à la propre css()méthode de jQuery dans les paramètres qu'il prend en charge:

/**
 * Sets a CSS style on the selected element(s) with !important priority.
 * This supports camelCased CSS style property names and calling with an object 
 * like the jQuery `css()` method. 
 * Unlike jQuery's css() this does NOT work as a getter.
 * 
 * @param {string|Object<string, string>} name
 * @param {string|undefined} value
 */   
jQuery.fn.cssImportant = function(name, value) {
  const $this = this;
  const applyStyles = (n, v) => {
    // Convert style name from camelCase to dashed-case.
    const dashedName = n.replace(/(.)([A-Z])(.)/g, (str, m1, upper, m2) => {
      return m1 + "-" + upper.toLowerCase() + m2;
    }); 
    // Loop over each element in the selector and set the styles.
    $this.each(function(){
      this.style.setProperty(dashedName, v, 'important');
    });
  };
  // If called with the first parameter that is an object,
  // Loop over the entries in the object and apply those styles. 
  if(jQuery.isPlainObject(name)){
    for(const [n, v] of Object.entries(name)){
       applyStyles(n, v);
    }
  } else {
    // Otherwise called with style name and value.
    applyStyles(name, value);
  }
  // This is required for making jQuery plugin calls chainable.
  return $this;
};

// Call the new plugin:
$('#elem').cssImportant('height', '100px');

// Call with an object and camelCased style names:
$('#another').cssImportant({backgroundColor: 'salmon', display: 'block'});

// Call on multiple items:
$('.item, #foo, #bar').cssImportant('color', 'red');

Exemple jsfiddle ici .

Nous devons d'abord supprimer le style précédent. Je le supprime en utilisant une expression régulière. Voici un exemple de changement de couleur:

var SetCssColorImportant = function (jDom, color) {
       var style = jDom.attr('style');
       style = style.replace(/color: .* !important;/g, '');
       jDom.css('cssText', 'color: ' + color + ' !important;' + style); }

Une autre façon d'ajouter du style dans la tête:

$('head').append('<style> #elm{width:150px !important} </style>');

Cela ajoute du style après tous vos fichiers CSS, il aura donc une priorité plus élevée que les autres fichiers CSS et sera appliqué.

Peut-être que ça ressemble à ceci:

Cache

var node = $ ('. selector') [0];
OU
var node = document.querySelector ('. selector');

Définir CSS

node.style.setProperty ('width', '100px', 'important');

Supprimer CSS

node.style.removeProperty ('width');
OU
node.style.width = '';

Je pense que cela fonctionne bien et peut écraser tout autre CSS avant (ceci: élément DOM):

this.setAttribute('style', 'padding:2px !important');

Fais-le comme ça:

$("#elem").get(0).style.width= "100px!important";

Cette solution laissera tout le javascript calculé et ajoutera la balise importante dans l'élément: Vous pouvez le faire (Ex si vous devez définir la largeur avec la balise importante)

$('exampleDiv').css('width', '');
//This will remove the width of the item
var styles = $('exampleDiv').attr('style');
//This will contain all styles in your item
//ex: height:auto; display:block;
styles += 'width: 200px !important;'
//This will add the width to the previous styles
//ex: height:auto; display:block; width: 200px !important;
$('exampleDiv').attr('style', styles);
//This will add all previous styles to your item

Trois exemples pratiques

J'ai eu une situation similaire, mais j'ai utilisé .find () après avoir lutté avec .closest () pendant une longue période avec de nombreuses variantes.

L'exemple de code

// Allows contain functions to work, ignores case sensitivity

jQuery.expr[':'].contains = function(obj, index, meta, stack) {
    result = false;
    theList = meta[3].split("','");
    var contents = (obj.textContent || obj.innerText || jQuery(obj).text() || '')
    for (x=0; x<theList.length; x++) {
        if (contents.toLowerCase().indexOf(theList[x].toLowerCase()) >= 0) {
            return true;
        }
    }
    return false;
};

$(document).ready(function() {
    var refreshId = setInterval( function() {
        $("#out:contains('foo', 'test456')").find(".inner").css('width', '50px', 'important');
    }, 1000); // Rescans every 1000 ms
});

Alternative

$('.inner').each(function () {
    this.style.setProperty('height', '50px', 'important');
});

$('#out').find('.inner').css({ 'height': '50px'});

Fonctionne: http://jsfiddle.net/fx4mbp6c/

Cela peut ou non être approprié pour votre situation, mais vous pouvez utiliser des sélecteurs CSS pour un grand nombre de ces types de situations.

Si, par exemple, vous vouliez que les 3e et 6e instances de .cssText aient une largeur différente, vous pourriez écrire:

.cssText:nth-of-type(3), .cssText:nth-of-type(6) {width:100px !important;}

Ou:

.container:nth-of-type(3).cssText, .container:nth-of-type(6).cssText {width:100px !important;}

Je suppose que vous l'avez essayé sans ajouter !important?

Le CSS en ligne (qui permet à JavaScript d'ajouter du style) remplace le CSS de la feuille de style. Je suis presque sûr que c'est le cas même lorsque la règle CSS de feuille de style a !important.

Une autre question (peut-être une question stupide mais qui doit être posée.): L'élément sur lequel vous essayez de travailler display:block;ou display:inline-block;?

Ne connaissant pas votre expertise en CSS ... les éléments en ligne ne se comportent pas toujours comme vous vous y attendez.

Nous pouvons utiliser setProperty ou cssText pour ajouter !importantà un élément DOM en utilisant JavaScript.

Exemple 1:

elem.style.setProperty ("color", "green", "important");

Exemple 2:

elem.style.cssText='color: red !important;'

J'ai également découvert que certains éléments ou modules complémentaires (comme Bootstrap) ont des cas de classe spéciaux où ils ne fonctionnent pas bien !importantou d'autres solutions de rechange comme .addClass/.removeClass, et donc vous devez les activer / désactiver.

Par exemple, si vous utilisez quelque chose comme <table class="table-hover">la seule façon de modifier avec succès des éléments comme les couleurs des lignes est d'activer table-hover/ désactiver la classe, comme ceci

$(your_element).closest("table").toggleClass("table-hover");

J'espère que cette solution de rechange sera utile à quelqu'un! :)

J'ai eu le même problème en essayant de changer la couleur du texte d'un élément de menu lors d'un "événement". La meilleure façon que j'ai trouvée quand j'ai eu ce même problème était:

Première étape: créez, dans votre CSS, une nouvelle classe dans ce but, par exemple:

.colorw{ color: white !important;}

Dernière étape: appliquez cette classe à l'aide de la méthode addClass comme suit:

$('.menu-item>a').addClass('colorw');

Problème résolu.

La solution de contournement la plus sûre est d'ajouter une classe, puis de faire la magie en CSS :-), addClass()et removeClass()devrait faire le travail.

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

Une autre approche consiste à créer et à mettre à jour dynamiquement la classe CSS en JavaScript. Pour ce faire, nous pouvons utiliser l'élément style et devons utiliser l'ID de 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)