Mam problem ze stosowaniem takiego stylu !important. Próbowałem:

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

To nic nie robi ; nie jest stosowany żaden styl szerokości. Czy istnieje jQuery sposób na zastosowanie takiego stylu bez konieczności nadpisywania cssText(co oznaczałoby, że musiałbym go najpierw przeanalizować itp.)?

Edycja : Powinienem dodać, że mam arkusz stylów ze !importantstylem, który próbuję zastąpić !importantstylem wbudowanym, więc używanie .width()i tym podobne nie działa, ponieważ jest zastępowane przez mój !importantstyl zewnętrzny .

Obliczana jest również wartość, która zastąpi poprzednią wartość , więc nie mogę po prostu stworzyć innego stylu zewnętrznego.

Problem jest spowodowany niezrozumieniem !importantatrybutu przez jQuery i dlatego nie stosuje reguły.

Możesz być w stanie obejść ten problem i zastosować regułę, odwołując się do niego za pośrednictwem addClass():

.importantRule { width: 100px !important; }

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

Lub używając attr():

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

To drugie podejście jednak rozbroiłoby wszelkie wcześniej ustawione reguły stylu w linii. Więc używaj ostrożnie.

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

Powyższe attr()podejście nieznacznie zmodyfikowano, aby zachować oryginalny styleciąg / właściwości, i zmodyfikowano zgodnie z sugestią falko w komentarzu:

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

Myślę, że znalazłem prawdziwe rozwiązanie. Wprowadziłem nową funkcję:

jQuery.style(name, value, priority);

Możesz go użyć do uzyskania wartości z .style('name')podobnie .css('name'), uzyskać CSSStyleDeclaration z .style(), a także ustawić wartości - z możliwością określenia priorytetu jako „ważny”. Zobacz to .

Próbny

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

Oto wynik:

null
red
blue
important

Funkcja

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

Zobacz to, jak czytać i ustawiać wartości CSS. Mój problem polegał na tym, że już ustawiłem !importantszerokość w swoim CSS, aby uniknąć konfliktów z innym CSS motywu, ale wszelkie zmiany wprowadzone w szerokości w jQuery pozostaną niezmienione, ponieważ zostaną dodane do atrybutu style.

Zgodność

Aby ustawić priorytet za pomocą setPropertyfunkcji, w tym artykule jest mowa o obsłudze IE 9+ i wszystkich innych przeglądarek. Próbowałem z IE 8 i nie powiodło się, dlatego zbudowałem obsługę tego w moich funkcjach (patrz wyżej). Będzie działał na wszystkich innych przeglądarkach korzystających z setProperty, ale będzie potrzebował mojego niestandardowego kodu do pracy w <IE 9.

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

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

Zaktualizowano dla komentarzy: Masz również tę opcję, ale zastąpi ona wszystkie css w elemencie, więc nie jestem pewien, czy jest to bardziej opłacalne:

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

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

Uwaga: korzystanie z Chrome może zwrócić błąd, taki jak:

elem [0] .style.removeAttribute nie jest funkcją

Zmiana linii w celu użycia .removePropertyfunkcji, np. W celu elem[0].style.removeProperty('width');rozwiązania problemu.

Odpowiedź Davida Thomasa opisuje sposób użycia $('#elem').attr('style', …), ale ostrzega, że ​​użycie go usunie wcześniej ustawione style w styleatrybucie. Oto sposób korzystania 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 demo JS Bin .

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

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

Nie działa to jednak w IE 8 i starszych wersjach.

Możesz to zrobić:

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

Używanie „cssText” jako nazwy właściwości i wszystkiego, co chcesz dodać do CSS jako jego wartości.

Możesz 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 tagów stylu.

Po prostu nadpisz styl, ale nie musisz nic analizować, dlaczego miałbyś?

// 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żywać removeProperty(), ponieważ nie usunie !importantreguł w Chrome.
Nie można użyćelement.style[property] = '' , ponieważ akceptuje tylko camelCase w przeglądarce Firefox.}

Prawdopodobnie można by to skrócić za pomocą jQuery, ale ta funkcja waniliowa będzie działać w nowoczesnych przeglądarkach, 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 zastępuje ż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 #elem, możesz zmienić jego identyfikator na inny i nadać mu dowolny styl ...

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

A w twoim CSS:

#cheaterId { width: 100px;}

Zamiast korzystać z css()funkcji, wypróbuj addClass()funkcję:

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

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

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

Na przykład:

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

A w twoim pliku CSS:

.importantClass {
    width: 100px !important;
}

Do twojej wiadomości, to nie działa, ponieważ jQuery go nie obsługuje. W 2012 r. Zgłoszono zgłoszenie (nr 11173 $ (elem) .css („właściwość”, „wartość! Ważna”) nie działa ), które ostatecznie zostało zamknięte jako WONTFIX.

Większość tych odpowiedzi jest obecnie nieaktualna, obsługa IE7 nie stanowi problemu.

Najlepszym sposobem na to, który obsługuje IE11 + i wszystkie nowoczesne przeglądarki, jest:

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

Lub jeśli chcesz, możesz utworzyć małą wtyczkę jQuery, która to robi. Ta wtyczka ściśle pasuje do własnej css()metody jQuery pod względem obsługiwanych parametrów:

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

Przykład jsfiddle tutaj .

Musimy najpierw 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 na dodanie stylu do głowy:

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

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

Może to wyglądać tak:

Pamięć podręczna

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

Ustaw CSS

node.style.setProperty („szerokość”, „100px”, „ważne”);

Usuń CSS

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

Myślę, że działa OK i może zastąpić każdy inny CSS wcześniej (this: DOM element):

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

Zrób to tak:

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

To rozwiązanie pozostawi cały obliczony javascript i doda ważny znacznik do elementu: Możesz to zrobić (np. Jeśli musisz ustawić szerokość za pomocą ważnego znacznika)

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

Trzy działające przykłady

Miałem podobną sytuację, ale użyłem .find () po długim zmaganiu się z .closest () z wieloma odmianami.

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

Alternatywny

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

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

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

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

Jeśli na przykład chciałbyś, aby 3. i 6. instancja .cssText miała inną szerokość, możesz 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;}

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

Inline CSS (czyli sposób dodawania stylów przez JavaScript) zastępuje arkusz stylów CSS. Jestem pewien, że tak jest nawet w przypadku reguły CSS arkusza stylów !important.

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

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

Do dodania możemy użyć setProperty lub cssText !important element DOM za pomocą JavaScript.

Przykład 1:

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

Przykład 2:

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

Odkryłem również, że niektóre elementy lub dodatki (takie jak Bootstrap) mają specjalne przypadki klasowe, w których nie działają dobrze z !importantinnymi rozwiązaniami .addClass/.removeClass, i dlatego musisz je włączać / wyłączać.

Na przykład, jeśli używasz czegoś w rodzaju <table class="table-hover">jedynego sposobu skutecznego modyfikowania elementów, takich jak kolory wierszy, to włączanie table-hover/ wyłączanie klasy, tak jak to

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

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

Miałem ten sam problem, próbując zmienić kolor tekstu elementu menu podczas „zdarzenia”. Najlepszym sposobem, jaki znalazłem, gdy miałem ten sam problem, było:

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

.colorw{ color: white !important;}

Ostatni krok: zastosuj tę klasę za pomocą metody addClass w następujący sposób:

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

Problem rozwiązany.

Najbezpieczniejszym obejściem tego problemu jest dodanie klasy, a następnie wykonanie magii w CSS :-) addClass()i removeClass()powinno to zrobić.

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

Alternatywnym podejściem jest dynamiczne tworzenie i aktualizowanie klasy CSS w JavaScript. Aby to zrobić, możemy użyć elementu stylu i musimy użyć identyfikatora dla elementu stylu, 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)