Problem jest spowodowany tym, że jQuery nie rozumie atrybutu !important i jako taki nie stosuje reguły.

.importantRule { width: 100px !important; }

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

Lub za pomocą attr():

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

To drugie podejście wyłączyłoby jednak wszelkie wcześniej ustawione reguły stylu in-line. Więc używaj ostrożnie.

Oczywiście jest dobry argument, że metoda @ Nick Craver jest łatwiejsza/mądrzejsza.

Powyższe, attr() podejście nieco zmodyfikowane, aby zachować oryginalny style string / properties:

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

Możesz ustawić szerokość bezpośrednio za pomocą .width() Tak:

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

Aktualizacja dla komentarzy: Masz również tę opcję, ale zastąpi ona wszystkie css na elemencie, więc nie wiem, czy jest bardziej opłacalna:

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

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

Odpowiedź Davida Thomasa opisuje sposób użycia $('#elem').attr('style', …), ale ostrzega, że użycie jej spowoduje usunięcie wcześniej ustawionych stylów w atrybucie style. Oto sposób użycia attr() bez tego problemu:

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

Jako funkcja:

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

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

Oto js bin demo .

Po przeczytaniu innych odpowiedzi i eksperymentowaniu, to działa na mnie:

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

To nie działa w IE 8 i pod, choć.

Możesz to zrobić:

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

Używanie" cssText " jako nazwy właściwości i cokolwiek chcesz dodać do CSS jako jego wartość.

Można to osiągnąć na dwa sposoby:

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

Nie ma potrzeby przechodzenia do złożoności odpowiedzi @AramKocharyan, ani potrzeby dynamicznego wstawiania znaczników stylów.

Po prostu Nadpisz styl, ale nie musisz niczego analizować, dlaczego?

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

_{Nie można użyć removeProperty(), ponieważ nie usunie reguł !important w Chrome.
Nie można używać element.style[property] = '', ponieważ akceptuje tylko camelCase w Firefoksie.}

Prawdopodobnie możesz to skrócić za pomocą jQuery, ale ta funkcja vanilla będzie działać na nowoczesne przeglądarki, Internet Explorer 8 itp.

Oto, co zrobiłem po napotkaniu tego problemu...

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

To rozwiązanie nie nadpisuje żadnego z poprzednich stylów, po prostu stosuje ten, którego potrzebujesz:

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

Jeśli nie jest to tak istotne, a ponieważ masz do czynienia z jednym elementem, który jest #elem, możesz zmienić jego id na coś innego i styl go jak chcesz...

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

I w CSS:

#cheaterId { width: 100px;}

Najprostszym i najlepszym rozwiązaniem tego problemu było po prostu użycie addClass() zamiast .css () lub .attr ().

Na przykład:

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

I w pliku CSS:

.importantClass {
    width: 100px !important;
}

Zamiast używać funkcji css() spróbuj użyć funkcji addClass():

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

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

FYI, to nie działa, ponieważ jQuery go nie obsługuje. Został złożony mandat na 2012 (#11173 $(elem).css ("property", " value !ważne") fails ), który został ostatecznie zamknięty jako WONTFIX.

Najpierw musimy usunąć poprzedni styl. Usuwam go za pomocą wyrażenia regularnego. Oto przykład zmiany koloru:

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

Alternatywny sposób dodawania stylu w głowie:

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

To dodaje styl po wszystkich plikach CSS, więc będzie miał wyższy priorytet niż inne pliki CSS i zostanie zastosowany.

Może to wyglądać tak:

Cache

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

Set CSS

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

Usuń CSS

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

Zakładam, że próbowałeś bez dodawania !important?

Inline CSS (czyli jak JavaScript dodaje styl) nadpisuje arkusz stylów CSS. Jestem prawie pewien, że tak jest nawet wtedy, gdy reguła CSS arkusza stylów mA !important.

Kolejne pytanie (może głupie pytanie, ale trzeba je zadać.): Czy element, na którym próbujesz pracować display:block; Czy display:inline-block;?

Nie znając swojej wiedzy w CSS... elementy wbudowane nie zawsze zachowują się tak, jak można by się tego spodziewać.

Zrób to tak:

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

Może to być odpowiednie dla twojej sytuacji, ale możesz używać selektorów CSS w wielu tego typu sytuacjach.

Jeśli, na przykład, chciałeś 3 .i 6. instancji.cssText aby mieć inną szerokość można napisać:

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

Lub:

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

Myślę, że działa OK i może nadpisać każdy inny CSS przed (ten: element DOM):

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

Odkryłem również, że niektóre elementy lub dodatki (jak Bootstrap) mają specjalne przypadki klas, w których nie grają dobrze z !important lub innymi wokół pracy, takimi jak .addClass/.removeClass, a więc musisz je włączyć/wyłączyć.

Na przykład, jeśli używasz czegoś takiego jak <table class="table-hover">, jedynym sposobem na pomyślną modyfikację elementów, takich jak kolory wierszy, jest włączenie / wyłączenie klasy table-hover, Jak to

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

Mam nadzieję, że to obejście będzie pomocne dla kogoś! :)

Możemy użyć setProperty lub cssText aby dodać !important do elementu DOM używając JavaScript.

Przykład 1:

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

Przykład 2:

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

Miałem ten sam problem próbując zmienić kolor tekstu elementu menu podczas "event". Najlepszy sposób, jaki znalazłem, gdy miałem ten sam problem, to:

Pierwszy krok: Utwórz w CSS nową klasę w tym celu, na przykład:

.colorw{ color: white !important;}

Ostatni krok: zastosuj tę klasę używając metody addClass w następujący sposób:

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

Trzy przykłady pracy

Przykładowy Kod

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

Alternatywa

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

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

Praca: http://jsfiddle.net/fx4mbp6c/

To rozwiązanie opuści cały obliczony javascript i doda ważny znacznik do elementu: Możesz to zrobić (np. jeśli chcesz ustawić szerokość z ważnym znacznikiem)

$('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

Https://jsfiddle.net/xk6Ut/256/

Alternatywnym podejściem jest dynamiczne tworzenie i aktualizowanie klas CSS w JavaScript. Aby to zrobić, możemy użyć elementu style i musimy użyć ID elementu style, abyśmy mogli zaktualizować klasę 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)

Najbezpieczniejszym obejściem jest dodanie klasy, a następnie wykonanie magii w CSS: -), addClass() i removeClass() powinny wykonać tę pracę.

Kolejna łatwa metoda rozwiązania problemu z dodaniem atrybutu style:

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