Je pense avoir trouvé une solution réelle. Je l'ai fait dans une nouvelle fonction:

jQuery.style(name, value, priority);

Vous pouvez l'utiliser pour obtenir des valeurs avec .style('name') tout comme .css('name') , obtenir CSSStyleDeclaration avec .style() , et également définir des valeurs – avec la possibilité de spécifier la priorité comme 'important' . Voir cela .

Démonstration

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

Consultez ceci pour des exemples de lecture et de définition des valeurs CSS. Mon problème était que j'avais déjà réglé !important pour la largeur dans mon CSS pour éviter les conflits avec d'autres CSS de thème, mais tout changement que j'ai fait à la largeur de jQuery ne serait pas affecté car ils seraient ajoutés à l'attribut de style.

Compatibilité

Pour définir avec la priorité en utilisant la fonction setProperty , cet article indique qu'il existe un support pour IE 9+ et tous les autres navigateurs. J'ai essayé avec IE 8 et il a échoué, c'est pourquoi j'ai créé un support pour cela dans mes fonctions (voir ci-dessus). Cela fonctionnera sur tous les autres navigateurs utilisant setProperty, mais il faudra que mon code personnalisé fonctionne dans <IE 9.

Le problème est causé par jQuery ne comprenant pas l'attribut !important Et, en tant que tel, ne parvient pas à appliquer la règle.

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

 .importantRule { width: 100px !important; } $('#elem').addClass('importantRule'); 

Ou en utilisant attr() :

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

Cette dernière approche annulerait toutefois les règles de style en ligne précédemment définies. Utilisez donc avec précaution.

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

L'approche ci-dessus, attr() légèrement modifié pour préserver la chaîne / propriétés de style origine:

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

Vous pouvez définir la largeur directement à l'aide de .width() comme ceci:

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

Mise à jour pour les commentaires: Vous avez également cette option, mais cela remplacera tous les css de l'élément, ne vous assurant donc pas qu'il soit plus viable:

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

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

La réponse de David Thomas décrit un moyen d'utiliser $('#elem').attr('style', …) , mais avertit que l'utiliser supprimera les styles précédemment définis dans l'attribut style . 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émonstration de JS Bin .

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

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

Cela ne fonctionne pas dans IE 8 et sous, cependant.

Tu peux le faire:

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

En utilisant "cssText" comme nom de la propriété et tout ce que vous voulez ajouté au css comme valeur.

Vous pouvez y parvenir de deux façons:

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

Un peu en retard, mais 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'); 

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

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

Et dans votre css:

 #cheaterId { width: 100px;} 

J'espère que cela vous aidera, Sinan.

Cette solution ne remplace aucun des styles précédents, il suffit d'appliquer 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,az, AZ, ]*;/,'')); else { $("foo").attr('style', heightStyle); } 

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

Il suffit d'écraser le style, mais vous n'avez pas à analyser quoi que ce soit, pourquoi voulez-vous?

 //accepts the hyphenated versions (ie 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 supprime pas !important règles !important dans Chrome.
Impossible d'utiliser element.style[property] = '' car il n'accepte que camelCase dans FireFox.}

Vous pourriez probablement faire cela plus court avec jQuery, mais cette fonction vanilla fonctionnera sur les navigateurs modernes, IE8 etc.

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

  <script> $(document).ready(function() { $("#example").addClass("exampleClass"); }); </script> <style> .exampleClass{ width:100% !important; height:100% !important; } </style> 

La solution la plus simple et la plus efficace pour 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; } 

Nous devons d'abord supprimer le style précédent. Je retire en utilisant un régulier. Je vous envoie un exemple pour modifier la couleur, …

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

On peut ressembler à ceci:

Cache

  Var node = $ ('. Selector') [0];
 OU
 Var node = document.querySelector ('. Selector');

Set css

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

Supprimer css

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

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

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

Cela ajoute du style après tous vos fichiers css afin qu'il ait une priorité plus élevée que les autres fichiers css et sera appliqué

FYI, cela ne fonctionne pas parce que jQuery ne le prend pas en charge. Il y a eu un billet déposé en 2012 ( # 11173 $ (elem) .css ("propriété", "valeur! Important") échoue ) qui a été finalement fermé comme WONTFIX.

Je suppose que vous l'avez essayé sans ajouter d'importance?
CSS en ligne (c'est à quoi js ajoute le style) annule la feuille de style css. Je suis tout à fait sûr que c'est le cas, même si la règle de styles CSS a une valeur importante.

Une autre question (peut-être une question stupide, mais doit être posée.): Est l'élément sur lequel vous essayez de travailler, est-ce que c'est affiché: bloc; Ou affichage: bloc en ligne; ?

Ne connaissant pas votre expertise en CSS … les éléments en ligne ne se comportent pas toujours comme vous l'attendiez.

Pourquoi ne pas faire comme ceci:

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

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

Si, par exemple, vous vouliez que les 3ème et 6ème instances de .cssText aient une largeur différente que 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;} 

Nous pouvons utiliser setProperty ou cssText pour ajouter! Important pour l'élément dom en utilisant le script java.

Eg1:

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

Eg2:

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

J'ai également découvert que certains éléments ou add-on (comme Bootstrap) ont des cas de classe spéciaux où ils ne jouent pas bien avec !important ou d'autres work- .addClass/.removeClass comme .addClass/.removeClass , et donc il faut les activer / de.

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, c'est de basculer / désactiver la classe table-hover , comme ceci

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

J'espère que ce travail sera utile à quelqu'un! 🙂

J'ai eu le même problème en essayant de modifier une couleur de texte d'un élément de menu lorsque "événement". La meilleure façon de trouver quand j'ai eu ce même problème est:

1ère étape: Créez, dans votre css, une nouvelle classe avec 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. J'espère que cela aide!

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 un élément de style et avons besoin d'utiliser l'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) 

3 exemples de travail

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

Le code d'exemple

 // allows contains fuction 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 1000ms }); 

Alternative

 $( '.inner' ).each(function () { this.style.setProperty( 'height', '50px', 'important' ); }); $('#out').find('.inner').css({ 'height': '50px'}); 

Si vous avez trouvé une quelconque utilisation, merci.

Travailler: http://jsfiddle.net/fx4mbp6c/

Une autre méthode facile pour résoudre ce problème en ajoutant l'attribut style:

 $('.selector').attr('style', 'width:500px !important');