У мене виникають проблеми із застосуванням такого стилю !important. Я спробував:

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

Це нічого не робить ; не застосовується стиль ширини. Чи існує спосіб jQuery-ish застосування такого стилю без необхідності перезапису cssText(що означатиме, що мені потрібно спершу проаналізувати його тощо)?

Редагувати : Я повинен додати, що у мене є таблиця стилів зі !importantстилем, який я намагаюся замінити на !importantстилі вбудованого стилю, тому використання .width()та подібне не працює, оскільки це переосмислюється моїм зовнішнім !importantстилем.

Також обчислюється значення, яке буде перевищувати попереднє значення , тому я не можу просто створити інший зовнішній стиль.

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

Ви можете вирішити цю проблему і застосувати правило, посилаючись на нього, через addClass():

.importantRule { width: 100px !important; }

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

Або використовуючи attr():

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

Останній підхід не зможе знищити будь-які раніше встановлені правила стильового стилю. Тому використовуйте обережно.

Звичайно, є хороший аргумент, що метод @Nick Craver простіший / розумніший.

Вищезазначене, attr()підхід дещо змінено для збереження початкового styleрядка / властивостей та змінено, як запропонував falko у коментарі:

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

Я думаю, що я знайшов справжнє рішення. Я перетворив його на нову функцію:

jQuery.style(name, value, priority);

Ви можете використовувати його для отримання значень з .style('name')так само .css('name'), отримати CSSStyleDeclaration з .style(), а також встановити значення - з можливістю визначати пріоритет як "важливий". Дивіться це .

Демо

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

Ось результат:

null
red
blue
important

Функція

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

Дивіться це для прикладів того, як читати та встановлювати значення CSS. Моя проблема полягала в тому, що я вже встановив !importantширину в своєму CSS, щоб уникнути конфліктів з іншою темою CSS, але будь-які зміни, внесені до ширини в jQuery, не вплинуть, оскільки вони будуть додані до атрибуту стилю.

Сумісність

Для встановлення пріоритету за допомогою setPropertyфункції, у цій статті йдеться про підтримку IE 9+ та всіх інших браузерів. Я намагався з IE 8, і він не вдався, тому я створив підтримку його у своїх функціях (див. Вище). Він буде працювати у всіх інших браузерах, що використовують setProperty, але для роботи в <IE 9 знадобиться мій спеціальний код.

Ви можете встановити ширину безпосередньо, використовуючи .width()такий:

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

Оновлено для коментарів: У вас є і ця опція, але вона замінить усі css на елементі, тож не впевнений, що це більше життєздатно:

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

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

Примітка. Використання Chrome може повернути помилку, наприклад:

elem [0] .style.removeAttribute не є функцією

Зміна рядка для використання такої .removePropertyфункції, як elem[0].style.removeProperty('width');виправлення проблеми.

Відповідь Девіда Томаса описує спосіб використання $('#elem').attr('style', …), але попереджає, що за допомогою нього буде видалено раніше задані стилі в 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 .

Прочитавши інші відповіді та експериментуючи, це для мене працює:

$(".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, але ця функція ванілі буде працювати у сучасних браузерах, 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;}

Замість використання css()функції спробуйте addClass()функцію:

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

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

Найпростішим та найкращим рішенням цієї проблеми було просто використовувати addClass () замість .css () або .attr ().

Наприклад:

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

І у вашому CSS-файлі:

.importantClass {
    width: 100px !important;
}

FYI, він не працює, тому що jQuery не підтримує його. На 2012 рік було подано квиток ( № 11173 $ (elem). Css ("властивість", "значення! Важливо") не вдається ), який врешті-решт був закритий як WONTFIX.

Більшість цих відповідей застаріли, підтримка IE7 - це не проблема.

Найкращий спосіб зробити це з підтримкою IE11 + та всіх сучасних браузерів :

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

Або якщо ви хочете, ви можете створити невеликий плагін jQuery, який робить це. Цей плагін тісно відповідає власному css()методу jQuery в параметрах, які він підтримує:

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

Приклад jsfiddle тут .

Потрібно спочатку видалити попередній стиль. Я видаляю його, використовуючи регулярний вираз. Ось приклад зміни кольору:

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

Альтернативний спосіб додавання стилю в голову:

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

Це додає стиль після всіх ваших CSS-файлів, тому він матиме більший пріоритет, ніж інші файли CSS, і він буде застосований.

Можливо, це виглядає так:

Кеш

var node = $ ('. селектор') [0];
АБО
var node = document.querySelector ('. селектор');

Встановити CSS

node.style.setProperty ('ширина', '100 пікселів', 'важливо');

Видаліть CSS

node.style.removeProperty ('ширина');
АБО
node.style.width = '';

Я думаю, що це працює добре і може замінити будь-який інший CSS раніше (це: елемент DOM):

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

Зробіть так:

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

Це рішення залишить усі обчислені 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

Три робочі приклади

У мене була схожа ситуація, але я довго використовував .find () після боротьби з .closest () з багатьма варіаціями.

Приклад коду

// 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/

Це може бути або не підходить для вашої ситуації, але ви можете використовувати селектори 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;}

Я б припустив, що ви спробували це без додавання !important?

Вбудований CSS (завдяки чому JavaScript додає стилізацію) замінює CSS таблиці таблиць стилів. Я впевнений, що це так, навіть якщо є CSS правило таблиці стилів !important.

Ще одне запитання (можливо, дурне запитання, але його потрібно задати.): Це елемент, над яким ви намагаєтесь працювати display:block;чи display:inline-block;?

Не знаючи ваших знань у сфері CSS ... вбудовані елементи не завжди поводяться так, як ви очікували.

Ми можемо використовувати setProperty або cssText, щоб додати !importantдо елемента DOM за допомогою JavaScript.

Приклад 1:

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

Приклад 2:

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

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

Наприклад, якщо ви використовуєте щось подібне, <table class="table-hover">єдиний спосіб успішного зміни елементів, таких як кольори рядків, - це вмикання table-hover/ вимкнення класу, як це

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

Сподіваємось, ця обробка буде комусь корисною! :)

У мене була така ж проблема, намагаючись змінити колір тексту пункту меню, коли "подія". Найкращий спосіб, який я виявив, коли у мене була така сама проблема:

Перший крок: Створіть у своєму CSS новий клас із цією метою, наприклад:

.colorw{ color: white !important;}

Останній крок: застосуйте цей клас за допомогою методу addClass наступним чином:

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

Проблема вирішена.

Найбезпечніше вирішення цього питання - додати клас, а потім зробити магію в CSS :-), addClass()і removeClass()слід виконати роботу.

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

Альтернативний підхід - динамічне створення та оновлення класу CSS в JavaScript. Для цього ми можемо використовувати елемент стилю та потрібно використовувати ідентифікатор для елемента стилю, щоб ми могли оновити клас 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)