Ho problemi ad applicare uno stile !important. Ho provato:

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

Questo non fa nulla ; non viene applicato alcun tipo di larghezza. Esiste un modo jQuery di applicare un tale stile senza doverlo sovrascrivere cssText(il che significherebbe che prima dovrei analizzarlo, ecc.)?

Modifica : dovrei aggiungere che ho un foglio di stile con uno !importantstile che sto cercando di sovrascrivere con uno !importantstile in linea, quindi usare .width()e simili non funziona poiché viene sovrascritto dal mio !importantstile esterno .

Inoltre, viene calcolato il valore che sovrascriverà il valore precedente , quindi non posso semplicemente creare un altro stile esterno.

Il problema è causato dal fatto che jQuery non comprende l' !importantattributo e pertanto non applica la regola.

Potresti essere in grado di aggirare il problema e applicare la regola facendo riferimento ad esso tramite addClass():

.importantRule { width: 100px !important; }

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

O usando attr():

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

Tuttavia, quest'ultimo approccio annullerebbe qualsiasi regola di stile in linea precedentemente impostata. Quindi usa con cura.

Naturalmente, c'è una buona argomentazione secondo cui il metodo di @Nick Craver è più semplice / più saggio.

Quanto sopra, l' attr()approccio è stato leggermente modificato per preservare la stylestringa / proprietà originale e modificato come suggerito da Falko in un commento:

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

Penso di aver trovato una vera soluzione. L'ho trasformato in una nuova funzione:

jQuery.style(name, value, priority);

Puoi usarlo per ottenere valori .style('name')proprio come .css('name'), ottenere CSSStyleDeclaration .style()e anche impostare valori - con la possibilità di specificare la priorità come 'importante'. Vedere questo .

dimostrazione

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

Ecco l'output:

null
red
blue
important

La funzione

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

Vedi questo per esempi su come leggere e impostare i valori CSS. Il mio problema era che avevo già impostato !importantla larghezza nel mio CSS per evitare conflitti con altri temi CSS, ma qualsiasi modifica apportata alla larghezza in jQuery non sarebbe stata influenzata poiché sarebbero stati aggiunti all'attributo style.

Compatibilità

Per l'impostazione con la priorità utilizzando la setPropertyfunzione, questo articolo afferma che esiste il supporto per IE 9+ e tutti gli altri browser. Ho provato con IE 8 e non ha funzionato, motivo per cui ho sviluppato il supporto nelle mie funzioni (vedi sopra). Funzionerà su tutti gli altri browser usando setProperty, ma avrà bisogno del mio codice personalizzato per funzionare in <IE 9.

Puoi impostare la larghezza direttamente usando in .width()questo modo:

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

Aggiornato per i commenti: hai anche questa opzione, ma sostituirà tutti i CSS sull'elemento, quindi non sei sicuro che sia più praticabile:

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

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

Nota: l'utilizzo di Chrome potrebbe restituire un errore come:

elem [0] .style.removeAttribute non è una funzione

Modifica della riga per utilizzare la .removePropertyfunzione in modo da elem[0].style.removeProperty('width');risolvere il problema.

La risposta di David Thomas descrive un modo di usare $('#elem').attr('style', …), ma avverte che il suo utilizzo eliminerà gli stili precedentemente impostati stylenell'attributo. Ecco un modo di usare attr()senza quel problema:

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

Come una funzione:

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

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

Ecco una demo di JS Bin .

Dopo aver letto altre risposte e sperimentato, questo è ciò che funziona per me:

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

Tuttavia, questo non funziona in IE 8 e precedenti.

Puoi farlo:

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

Usando "cssText" come nome della proprietà e qualunque cosa tu voglia aggiungere al CSS come valore.

Puoi farlo in due modi:

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

Non è necessario andare alla complessità della risposta di @ AramKocharyan, né alla necessità di inserire dinamicamente tag di stile.

Basta sovrascrivere lo stile, ma non è necessario analizzare nulla, perché dovresti?

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

_{Impossibile utilizzare removeProperty()perché non rimuoverà le !importantregole in Chrome.
Impossibile utilizzare element.style[property] = '', perché accetta solo camelCase in Firefox.}

Probabilmente potresti accorciarlo con jQuery, ma questa funzione vanilla verrà eseguita su browser moderni, Internet Explorer 8, ecc.

Ecco cosa ho fatto dopo aver riscontrato questo problema ...

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

Questa soluzione non sostituisce nessuno degli stili precedenti, applica solo quello di cui hai bisogno:

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

Se non è così rilevante e poiché hai a che fare con un elemento che lo è #elem, puoi cambiare il suo ID in qualcos'altro e modellarlo come desideri ...

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

E nel tuo CSS:

#cheaterId { width: 100px;}

Invece di utilizzare la css()funzione, prova la addClass()funzione:

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

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

La soluzione più semplice e migliore per questo problema da parte mia era usare semplicemente addClass () invece di .css () o .attr ().

Per esempio:

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

E nel tuo file CSS:

.importantClass {
    width: 100px !important;
}

Cordiali saluti, non funziona perché jQuery non lo supporta. Nel 2012 è stato archiviato un ticket ( errore # 11173 $ (elem) .css ("proprietà", "valore! Importante" ) che alla fine è stato chiuso come WONTFIX.

La maggior parte di queste risposte è obsoleta, il supporto IE7 non è un problema.

Il modo migliore per fare ciò che supporta IE11 + e tutti i browser moderni è:

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

Oppure, se lo desideri, puoi creare un piccolo plugin jQuery per farlo. Questo plugin si avvicina molto al css()metodo di jQuery nei parametri che supporta:

/**
 * 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');

Esempio jsfiddle qui .

Dobbiamo prima rimuovere lo stile precedente. Lo rimuovo usando un'espressione regolare. Ecco un esempio per cambiare colore:

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

Un modo alternativo per aggiungere stile alla testa:

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

Questo accoda lo stile dopo tutti i tuoi file CSS, quindi avrà una priorità più alta rispetto agli altri file CSS e verrà applicato.

Può essere così:

nascondiglio

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

Imposta CSS

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

Rimuovi CSS

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

Penso che funzioni bene e può sovrascrivere qualsiasi altro CSS prima (questo: elemento DOM):

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

Fai cosi:

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

Questa soluzione lascerà tutto il javascript calcolato e aggiungerà il tag importante nell'elemento: Puoi farlo (ad esempio se devi impostare la larghezza con il tag 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

Tre esempi di lavoro

Ho avuto una situazione simile, ma ho usato .find () dopo aver lottato con .closest () per lungo tempo con molte varianti.

Il codice di esempio

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

Alternativa

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

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

Funzionando: http://jsfiddle.net/fx4mbp6c/

Può essere o non essere appropriato per la tua situazione, ma puoi usare i selettori CSS per molte di queste situazioni.

Se, ad esempio, desideri che la 3a e la 6a istanza di .cssText abbiano una larghezza diversa, puoi scrivere:

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

O:

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

Suppongo che tu abbia provato senza aggiungere !important?

I CSS incorporati (ovvero JavaScript aggiunge lo stile) sovrascrivono i CSS del foglio di stile. Sono abbastanza sicuro che sia così anche quando ha la regola CSS del foglio di stile !important.

Un'altra domanda (forse una domanda stupida, ma deve essere fatta.): L'elemento su cui stai cercando di lavorare display:block;o display:inline-block;?

Non conoscendo la tua esperienza nei CSS ... gli elementi in linea non si comportano sempre come ti aspetteresti.

Possiamo usare setProperty o cssText per aggiungere !importanta un elemento DOM usando JavaScript.

Esempio 1:

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

Esempio 2:

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

Ho anche scoperto che alcuni elementi o componenti aggiuntivi (come Bootstrap) hanno alcuni casi di classe speciali in cui non giocano bene !importanto altri aggiramenti come .addClass/.removeClass, e quindi devi attivarli / disattivarli.

Ad esempio, se usi qualcosa come <table class="table-hover">l'unico modo per modificare correttamente elementi come i colori delle righe è attivare table-hover/ disattivare la classe, in questo modo

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

Spero che questa soluzione possa essere utile a qualcuno! :)

Ho avuto lo stesso problema nel tentativo di cambiare il colore del testo di una voce di menu quando "evento". Il modo migliore che ho trovato quando ho avuto lo stesso problema è stato:

Primo passo: crea, nel tuo CSS, una nuova classe con questo scopo, ad esempio:

.colorw{ color: white !important;}

Ultimo passaggio: applicare questa classe utilizzando il metodo addClass come segue:

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

Problema risolto.

La soluzione più sicura a questo è aggiungere una classe e poi fare la magia in CSS :-), addClass()e removeClass()dovrebbe fare il lavoro.

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

Un approccio alternativo è la creazione e l'aggiornamento dinamico della classe CSS in JavaScript. Per fare ciò, possiamo usare l'elemento style e dobbiamo usare l'ID per l'elemento style in modo da poter aggiornare 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)