проблема вызвана jQuery не понимая !important атрибут, и как таковой не удается применить правило.

вы можете обойти эту проблему и применить правило, обратившись к нему через addClass():

.importantRule { width: 100px !important; }

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

и с помощью attr():

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

последний подход будет отменять любые ранее установленные правила стиля в строке. Поэтому используйте с осторожностью.

конечно, есть хороший аргумент, что метод @Nick Craver легче / мудрее.

выше, attr() подход слегка изменен, чтобы сохранить оригинал style строка/свойства:

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

вы можете установить ширину непосредственно с помощью .width() такой:

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

обновлено для комментариев: У вас есть этот вариант, но он заменит все css на элементе, поэтому не уверен, что он более жизнеспособен:

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

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

ответ Дэвида Томаса описывает способ использования $('#elem').attr('style', …), но предупреждает, что с его помощью будут удалены ранее установленные стили в . Вот способ использования attr() без этой проблемы:

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

функции:

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

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

здесь JS Bin demo.

после прочтения других ответов и экспериментов, это то, что работает для меня:

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

Это не работает в IE 8 и ниже, хотя.

вы можете сделать это:

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

использование "cssText" в качестве имени свойства и все, что вы хотите добавить в CSS в качестве его значения.

вы можете достичь этого двумя способами:

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

нет необходимости переходить к сложности ответа @AramKocharyan, а также динамически вставлять теги стилей.

просто перезаписать стиль, но вам не нужно ничего разбирать, зачем вам это?

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

_{Не могу использовать removeProperty(), потому что он не будет удалять !important правила в Chrome.
Не могу использовать element.style[property] = '', потому что он принимает только camelCase в Firefox.}

вы могли бы сделать это короче с jQuery, но эта функция vanilla будет работать в современных браузерах, Internet Explorer 8 и т. д.

вот что я сделал после того, как столкнулся с этой проблемой...

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

это решение не переопределяет ни один из предыдущих стилей, оно просто применяет тот, который вам нужен:

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

Если это не так важно и поскольку вы имеете дело с одним элементом, который #elem, вы можете изменить свой код, чтобы что-то еще и стиль его, как вы хотите...

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

и в вашем CSS:

#cheaterId { width: 100px;}

самым простым и лучшим решением этой проблемы от меня было просто использовать addClass() вместо .css () or .буква attr().

например:

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

и в вашем файле CSS:

.importantClass {
    width: 100px !important;
}

вместо

FYI, это не работает, потому что jQuery не поддерживает его. Был подан билет на 2012 год (#11173 $(elem).УСБ("свойство", "значение !важно") терпит неудачу), который в конечном итоге был закрыт как WONTFIX.

сначала нужно удалить предыдущий стиль. Я удаляю его с помощью регулярного выражения. Вот пример изменения цвета:

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

альтернативный способ добавления стиля в head:

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

Это добавляет стиль после всех ваших файлов CSS, поэтому он будет иметь более высокий приоритет, чем другие файлы CSS, и будет применяться.

может быть, это выглядит вот так:

кэш

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

установить CSS

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

удалить CSS

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

Я бы предположил, что вы попробовали это без добавления !important?

встроенный CSS (так JavaScript добавляет стиль) переопределяет CSS таблицы стилей. Я уверен, что это так, даже если правило CSS таблицы стилей имеет !important.

другой вопрос (может быть, глупый вопрос, но должен быть задан.): Является ли элемент, над которым вы пытаетесь работать display:block; или display:inline-block;?

не зная вашего опыта в CSS... встроенные элементы не всегда ведут себя так, как вы ожидать.

делай так:

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

это может быть или не быть подходящим для вашей ситуации, но вы можете использовать селекторы CSS для многих из этих типов ситуаций.

Если, например, вы хотели 3-го и 6-го экземпляров .cssText, чтобы иметь другую ширину, вы можете написать:

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

или:

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

Я думаю, что он работает нормально и может перезаписать любой другой CSS раньше (это: элемент DOM):

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

Я также обнаружил, что некоторые элементы или дополнения (например, Bootstrap) имеют некоторые специальные случаи класса, где они не играют хорошо с !important или другие работы, такие как .addClass/.removeClass, и, таким образом, вы должны включить/выключить.

например, если вы используете что-то вроде <table class="table-hover">единственный способ успешно изменить элементы, такие как цвета строк, - переключить table-hover класс вкл / выкл, вот так

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

Надеюсь, эта работа будет полезна кому-то! :)

мы можем использовать setProperty или cssText для добавления !important к элементу DOM с помощью JavaScript.

Пример 1:

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

Пример 2:

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

у меня была такая же проблема, пытаюсь изменить цвет текста пункта меню, когда "событие". Лучший способ, который я нашел, когда у меня была такая же проблема:

первый шаг: создайте в своем CSS новый класс с этой целью, например:

.colorw{ color: white !important;}

последний шаг: примените этот класс с помощью метода addClass следующим образом:

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

проблема решена.

три рабочих примера

у меня была похожая ситуация, но я привык .find () после борьбы .ближайший() в течение длительного времени со многими вариациями.

Пример Кода

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

альтернатива

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

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

работа:http://jsfiddle.net/fx4mbp6c/

это решение оставит весь вычисленный javascript и добавит важный тег в элемент: Вы можете сделать (например, если вам нужно установить ширину важный тег)

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

альтернативным подходом является динамическое создание и обновление класса CSS в JavaScript. Для этого мы можем использовать элемент style и должны использовать ID для элемента style, чтобы мы могли обновить класс 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)

самый безопасный обходной путь к этому-добавить класс, а затем сделать магию в CSS : -),addClass() и removeClass() должен делать работу.

еще один простой способ решить эту проблему, добавив атрибут style:

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