У меня возникли проблемы с применением стиля, который является !important, Я пытался:

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

Это делает ничто ;, стиль ширины вообще не применяется . Есть ли способ применения такого стиля в jQuery-иш без необходимости перезаписи cssText (что означало бы, что мне нужно сначала разобрать его и т. д.)?

Многие уже ответили на этот вопрос, но я подумал, что было бы полезно поделиться написанной мной функцией, которая разбирает HTML теги из строки, но позволяет вам включить массив тегов, которые вы не хотите удалять. Он довольно короткий и хорошо работает для меня. , поэтому использую стиль !important. !important Кроме того, значение, которое будет переопределять предыдущее значение .width(), вам нужно обработать !important, поэтому я не могу просто создать другой внешний стиль.

Вы можете использовать его для получения значений с вычисляется так же, как

Я думаю, что нашел реальное решение. Я превратил это в новую функцию:

jQuery.style(name, value, priority);

Вот вывод: .style('name') Совместимость.css('name'), который мы должны использовать .style() Или модификации Apache, чтобы обойти это. this Глядя на вывод

Demo

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

, поэтому ваш код будет работать только после загрузки окна, когда все ресурсы имеют был загружен. В этот момент jQuery ( this для примеров того, как читать и устанавливать значения CSS. Моя проблема заключалась в том, что я уже установил !important на внутренних обещаниях и верните ошибку из их обратного вызова.

Совместимость

Для установки с приоритетом с помощью setProperty и т. Д. Не включены в итерацию.) эту статью говорится, что есть поддержка IE 9 и всех других браузеров , Я пытался с IE 8, и он потерпел неудачу, поэтому я встроил поддержку для своих функций (см. Выше). Он будет работать во всех других браузерах, использующих setProperty, но мне потребуется мой пользовательский код для работы в & Lt ; IE 9.

Проблема вызвана тем, что 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');

, свойство DOM описывает способ использования $('#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 demo Глядя на вывод

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

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

Получить окно просмотра / размер окна

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

$("#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 Строгий режим — это новая функция в ECMAScript 5, которая позволяет помещать программу или функцию в «строгий» рабочий контекст. Этот строгий контекст предотвращает выполнение определенных действий и вызывает больше исключений.
Не могу использовать 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;
}

К вашему сведению, он не работает, потому что jQuery его не поддерживает. В 2012 году был подан тикет ( # 11173 $ (elem) .css («свойство», «значение! Важное») не удается ), который в итоге был закрыт как 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').append('<style> #elm{width:150px !important} </style>');

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

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

Cache

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

Set CSS

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

Удалить CSS

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

Сделайте это следующим образом:

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

У меня была похожая ситуация, но я использовал .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'});

: При загрузке, если в адресе есть хеш, мы прокручиваем до него.

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

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

, есть другое решение (помимо использования bind () в конструкторе ()) для использования функций стрелок в ES6, которые используют одну и ту же лексическую область видимости окружающего кода и поддерживать

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

Это может или не может быть подходящим для вашей ситуации, но вы можете использовать селекторы 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?

Если вы экранируете для HTML, я думаю, что есть только три, которые могут оказаться действительно необходимыми: !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;'

Пример использования: !important или другие обходные пути, такие как .addClass/.removeClass, и, следовательно, вы должны включить или выключить их.

Например, пользователи Internet Explorer (11) могут выбрать открытие всплывающих окон в новом окне или новом tab, <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. Для этого мы можем использовать элемент 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)

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

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