Bir stili uygulamakta zorlanıyorum !important. Denedim:

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

Bu hiçbir şey yapmaz ; herhangi bir genişlik stili uygulanmaz. Üzerine yazmak zorunda kalmadan böyle bir stil uygulamak için bir jQuery-ish yolu var mı cssText(bu ilk önce ayrıştırmak gerekir anlamına gelir, vb)?

Düzenleme : Ben !importantbir !importantstil satır içi ile geçersiz kılmaya çalışıyorum bir stile sahip bir stil sayfası var , bu yüzden kullanarak .width()ve benim dış !importantstil tarafından geçersiz kılındı ​​beri benzer çalışmaz eklemeniz gerekir .

Ayrıca, önceki değeri geçersiz kılacak değer hesaplanır , bu yüzden başka bir dış stil oluşturamıyorum.

Sorun jQuery !importantözniteliği anlamadığı için oluşur ve bu nedenle kuralı uygulayamaz.

Bu soruna geçici bir çözüm sağlayabilir ve kurala başvurarak uygulayabilirsiniz addClass():

.importantRule { width: 100px !important; }

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

Veya şunu kullanarak attr():

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

İkinci yaklaşım, önceden belirlenmiş satır içi stil kurallarını kaldırır. Bu yüzden dikkatli kullanın.

Tabii ki, @Nick Craver'ın yönteminin daha kolay / akıllı olduğu konusunda iyi bir argüman var.

Yukarıdaki attr()yaklaşım orijinal styledizeyi / özellikleri korumak için biraz değiştirilmiş ve bir yorumda falko tarafından önerildiği gibi değiştirilmiştir :

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

Bence gerçek bir çözüm buldum. Yeni bir işlev haline getirdim:

jQuery.style(name, value, priority);

Bunu, .style('name')tıpkı değerleri gibi .css('name')almak, CSSStyleDeclaration'ı almak .style()ve değerleri ayarlamak için kullanabilirsiniz - önceliği 'önemli' olarak belirleme yeteneğiyle. Bkz bu .

gösteri

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

İşte çıktı:

null
red
blue
important

İşlev

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

Bkz bu okuma ve CSS değerleri ayarlamak için nasıl örnekler için. Benim sorunum zaten !importantdiğer tema CSS ile çakışmaları önlemek için benim CSS genişliği için ayarlamıştı , ama stil özniteliğine ekleneceği için jQuery genişliğinde yaptığım herhangi bir değişiklik etkilenmeyecekti.

uygunluk

Bu makaleyi kullanarak önceliği ayarlamak için setProperty, Bu Makale IE 9+ ve diğer tüm tarayıcılar için destek olduğunu söylüyor. IE 8 ile denedim ve başarısız oldu, bu yüzden işlevlerim için destek inşa ettim (yukarıya bakın). SetProperty kullanan tüm diğer tarayıcılarda çalışır, ancak <IE 9'da çalışmak için özel koduma ihtiyaç duyacaktır.

Genişliği şu şekilde kullanarak doğrudan ayarlayabilirsiniz .width():

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

Yorumlar için güncellendi: Bu seçeneğiniz de var, ancak öğedeki tüm css'in yerini alacak, bu yüzden daha uygun olduğundan emin değilsiniz:

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

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

Not: Chrome'u kullanmak aşağıdakiler gibi bir hata döndürebilir:

elem [0] .style.removeAttribute bir işlev değil

Hattı .removePropertydüzeltmek gibi işlevi kullanmak elem[0].style.removeProperty('width');için sorunu gidermek .

David Thomas'ın cevabı bir kullanım yolunu açıklıyor $('#elem').attr('style', …), ancak bunu kullanmanın styleöznitelikte önceden ayarlanmış stilleri sileceği konusunda uyarıyor . İşte attr()bu problem olmadan kullanmanın bir yolu :

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

İşlev olarak:

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

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

İşte bir JS Bin demosu .

Diğer cevapları okuduktan ve denedikten sonra, benim için işe yarayan şey bu:

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

Bu IE 8 ve altında çalışmıyor.

Bunu yapabilirsiniz:

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

Özellik adı olarak "cssText" ve değeri olarak CSS'ye eklemek istediğiniz her şeyi kullanın.

Bunu iki şekilde başarabilirsiniz:

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

@ AramKocharyan'ın cevabının karmaşıklığına veya stil etiketlerini dinamik olarak eklemeye gerek yoktur.

Sadece stilin üzerine yaz, ama hiçbir şeyi ayrıştırmak zorunda değilsin, neden?

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

_{Kullanamıyorum removeProperty()o kaldırmaz çünkü !importantChrome'da kuralları.
Kullanılamaz element.style[property] = '', çünkü yalnızca Firefox'ta camelCase kabul eder.}

Bunu jQuery ile muhtemelen daha kısa yapabilirsiniz, ancak bu vanilya işlevi modern tarayıcılarda, Internet Explorer 8'de vb.

İşte bu sorunla karşılaştıktan sonra yaptığım şey ...

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

Bu çözüm önceki stillerin hiçbirini geçersiz kılmaz, sadece ihtiyacınız olanı uygular:

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

Çok alakalı değilse ve bir öğe ile uğraşıyorsanız #elem, kimliğini başka bir şeye değiştirebilir ve istediğiniz gibi şekillendirebilirsiniz ...

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

Ve CSS'nizde:

#cheaterId { width: 100px;}

css()İşlevi kullanmak yerine şu işlevi deneyin addClass():

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

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

Benden bu sorunun en kolay ve en iyi çözümü .css () veya .attr () yerine addClass () kullanmaktı.

Örneğin:

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

Ve CSS dosyanızda:

.importantClass {
    width: 100px !important;
}

Bilginize, çalışmıyor çünkü jQuery bunu desteklemiyor. 2012'de ( # 11173 $ (elem) .css ("özellik", "değer! Önemli") başarısız ) açılan bir bilet vardı ve sonunda WONTFIX olarak kapatıldı.

Bu yanıtların çoğu artık güncel değil, IE7 desteği bir sorun değil.

IE11 + ve tüm modern tarayıcıları destekleyen bunu yapmanın en iyi yolu :

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

İsterseniz, bunu yapan küçük bir jQuery eklentisi oluşturabilirsiniz. Bu eklenti css(), desteklediği parametrelerde jQuery'nin kendi yöntemiyle yakından eşleşir :

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

Örnek jsfiddle burada .

Önce bir önceki stili kaldırmamız gerekir. Düzenli bir ifade kullanarak kaldırıyorum. Rengi değiştirmek için bir örnek:

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

Kafasına stil eklemenin alternatif bir yolu:

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

Bu, tüm CSS dosyalarınıza stil ekler, böylece diğer CSS dosyalarından daha yüksek önceliğe sahip olur ve uygulanır.

Belki şu şekilde olabilir:

Önbellek

var düğüm = $ ('. seçici') [0];
VEYA
var node = document.querySelector ('. seçici');

CSS ayarla

node.style.setProperty ('genişlik', '100px', 'önemli');

CSS'yi kaldır

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

Tamam çalışıyor ve daha önce başka herhangi bir CSS üzerine yazabilir düşünüyorum (bu: DOM öğesi):

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

Şöyle yapın:

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

Bu çözüm, hesaplanan tüm javascript'i bırakacak ve öğeye önemli etiketi ekleyecektir: Yapabilirsiniz (Genişliği önemli etiketle ayarlamanız gerekirse Ex)

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

Üç çalışma örneği

Benzer bir durumum vardı, ama .closest () ile uzun bir süre birçok varyasyonla mücadele ettikten sonra .find () kullandım.

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

Alternatif

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

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

Çalışıyor: http://jsfiddle.net/fx4mbp6c/

Durumunuz için uygun olabilir veya olmayabilir, ancak bu tür birçok durum için CSS seçicilerini kullanabilirsiniz.

Örneğin, .cssText'in 3. ve 6. örneklerinin farklı bir genişliğe sahip olmasını istiyorsanız yazabilirsiniz:

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

Veya:

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

Eklemeden denediğinizi varsayalım !important?

Satır içi CSS (JavaScript bu şekilde stil ekler) stil sayfası CSS'sini geçersiz kılar. Stil sayfası CSS kuralı olsa bile durumun bu olduğundan eminim !important.

Başka bir soru (belki aptalca bir soru ama sorulması gerekir.): Üzerinde çalıştığınız eleman mı display:block;yoksa display:inline-block;?

CSS'deki uzmanlığınızı bilmiyorsanız ... satır içi öğeler her zaman beklediğiniz gibi davranmaz.

!importantJavaScript kullanarak bir DOM öğesine eklemek için setProperty veya cssText'i kullanabiliriz .

Örnek 1:

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

Örnek 2:

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

Ayrıca belirli öğelerin veya eklentilerin (Bootstrap gibi) iyi oynamadıkları bazı özel sınıf durumları olduğunu !importantveya bunun gibi diğer geçici çözümlerin olduğunu keşfettim .addClass/.removeClassve bu nedenle onları açıp kapatmak zorundasınız.

Örneğin, <table class="table-hover">satır renkleri gibi öğeleri başarılı bir şekilde değiştirmenin tek yolu gibi bir şey kullanıyorsanız , table-hoversınıfı şu şekilde açıp kapatmaktır:

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

Umarım bu çözüm birisine yardımcı olacaktır! :)

Ben "olay" bir menü öğesinin bir metin rengini değiştirmeye çalışırken aynı sorunu vardı. Aynı sorunu yaşadığımda bulduğum en iyi yol:

İlk adım: CSS'nizde bu amaçla yeni bir sınıf oluşturun, örneğin:

.colorw{ color: white !important;}

Son adım: addClass yöntemini kullanarak bu sınıfı aşağıdaki gibi uygulayın:

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

Sorun çözüldü.

Bunun en güvenli çözümü, bir sınıf eklemek ve daha sonra CSS'de sihri yapmaktır :-) addClass()ve removeClass()işi yapmalıdır.

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

Alternatif bir yaklaşım, JavaScript'te dinamik olarak CSS sınıfı oluşturmak ve güncellemektir. Bunu yapmak için stil öğesini kullanabiliriz ve CSS sınıfını güncelleyebilmemiz için style öğesinin kimliğini kullanmamız gerekir

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)