Как применить !important с помощью .css()?

При использовании jQuery для манипуляции со стилями элемента, вы можете столкнуться с ошибкой в Chrome, если попытаетесь вызвать метод removeAttribute у свойства style. Это связано с тем, что style — это объект, который содержит инлайновые стили элемента, и у него нет метода removeAttribute, так как этот метод предназначен для свойств элемента, а не для стилей.

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

elem[0].style.removeAttribute is not a function

Чтобы устранить эту ошибку, необходимо заменить removeAttribute на метод removeProperty. Вот корректный код:

const elem = $("#elem");
elem[0].style.removeProperty('width'); // Удаляем свойство 'width'
elem[0].style.setProperty('width', '100px', 'important'); // Устанавливаем новое значение

Использование .removeProperty корректно удаляет свойство стиля width, и ваш код будет работать без ошибок.

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

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

Однако стоит отметить, что это не работает в IE 8 и более ранних версиях.

Вы можете сделать это следующим образом:

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

Используя cssText в качестве имени свойства и добавляя нужные вам стили в качестве значения.

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

$("#elem").prop("style", "width: 100px !important"); // это не поддерживается в Chrome
$("#elem").attr("style", "width: 100px !important");

Однако стоит учесть, что метод .prop() может не работать корректно в некоторых браузерах, например, в Chrome. Используйте метод .attr(), чтобы задать стили, если вам нужна поддержка различных браузеров.

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

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

Вот пример функции:

// Принимает свойства в формате с дефисами (т.е. не 'cssFloat')
function addStyle(element, property, value, important) {
    // Удаляем ранее заданное свойство
    if (element.style.setProperty)
        element.style.setProperty(property, '');
    else
        element.style.setAttribute(property, '');

    // Вставляем новый стиль ко всем старым правилам
    element.setAttribute('style', element.style.cssText +
        property + ':' + value + ((important) ? ' !important' : '') + ';');
}

Вы, возможно, можете сделать это короче с помощью jQuery, но эта функция на чистом JavaScript будет работать в современных браузерах, а также в Internet Explorer 8 и ниже.