Saya mengalami kesulitan menerapkan gaya itu !important. Saya sudah mencoba:

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

Ini tidak melakukan apa - apa ; tidak ada gaya lebar yang diterapkan. Apakah ada cara jQuery-ish menerapkan gaya seperti itu tanpa harus menimpa cssText(yang berarti saya harus menguraikannya terlebih dahulu, dll)?

Sunting : Saya harus menambahkan bahwa saya memiliki stylesheet dengan !importantgaya yang saya coba timpa dengan !importantstyle inline, jadi menggunakan .width()dan sejenisnya tidak berfungsi karena akan ditimpa oleh !importantgaya eksternal saya .

Juga, nilai yang akan menggantikan nilai sebelumnya dihitung , jadi saya tidak bisa begitu saja membuat gaya eksternal lain.

Masalahnya disebabkan oleh jQuery tidak memahami !importantatribut, dan karena itu gagal menerapkan aturan.

Anda mungkin dapat mengatasi masalah itu, dan menerapkan aturan dengan merujuknya, melalui addClass():

.importantRule { width: 100px !important; }

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

Atau dengan menggunakan attr():

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

Pendekatan yang terakhir akan menghapus semua aturan gaya in-line yang ditetapkan sebelumnya. Jadi gunakan dengan hati-hati.

Tentu saja, ada argumen bagus bahwa metode @Nick Craver lebih mudah / lebih bijaksana.

Di atas, attr()pendekatan dimodifikasi sedikit untuk mempertahankan stylestring / properti asli, dan dimodifikasi seperti yang disarankan oleh falko dalam komentar:

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

Saya pikir saya telah menemukan solusi nyata. Saya telah membuatnya menjadi fungsi baru:

jQuery.style(name, value, priority);

Anda dapat menggunakannya untuk mendapatkan nilai .style('name')seperti .css('name'), dapatkan CSSStyleDeclaration dengan .style(), dan juga menetapkan nilai - dengan kemampuan untuk menentukan prioritas sebagai 'penting'. Lihat ini .

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

Inilah hasilnya:

null
red
blue
important

Fungsinya

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

Lihat ini untuk contoh cara membaca dan mengatur nilai CSS. Masalah saya adalah bahwa saya sudah menetapkan!important lebar pada CSS saya untuk menghindari konflik dengan CSS tema lainnya, tetapi setiap perubahan yang saya buat pada lebar dalam jQuery tidak akan terpengaruh karena mereka akan ditambahkan ke atribut style.

Kesesuaian

Untuk pengaturan dengan prioritas menggunakan setPropertyfungsi, Artikel ini mengatakan ada dukungan untuk IE 9+ dan semua browser lainnya. Saya telah mencoba dengan IE 8 dan gagal, itulah sebabnya saya membangun dukungan untuk itu dalam fungsi saya (lihat di atas). Ini akan bekerja pada semua browser lain menggunakan setProperty, tetapi akan membutuhkan kode khusus saya untuk bekerja di <IE 9.

Anda dapat mengatur lebar langsung menggunakan .width()seperti ini:

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

Diperbarui untuk komentar: Anda memiliki opsi ini juga, tetapi itu akan mengganti semua css pada elemen, jadi tidak yakin itu lebih layak:

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

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

Catatan: Menggunakan Chrome dapat mengembalikan kesalahan seperti:

elem [0] .style.removeAttribute bukan fungsi

Mengubah jalur untuk menggunakan .removePropertyfungsi seperti untuk elem[0].style.removeProperty('width');memperbaiki masalah.

Jawaban David Thomas menjelaskan cara menggunakan $('#elem').attr('style', …), tetapi memperingatkan bahwa menggunakannya akan menghapus gaya yang sebelumnya ditetapkan dalam styleatribut. Inilah cara penggunaan attr()tanpa masalah itu:

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

Sebagai fungsi:

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

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

Berikut ini adalah demo JS Bin .

Setelah membaca jawaban lain dan bereksperimen, inilah yang berhasil bagi saya:

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

Ini tidak bekerja di IE 8 dan di bawahnya.

Kamu bisa melakukan ini:

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

Menggunakan "cssText" sebagai nama properti dan apa pun yang Anda ingin tambahkan ke CSS sebagai nilainya.

Anda dapat mencapai ini dalam dua cara:

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

Tidak perlu pergi ke kompleksitas jawaban @ AramKocharyan, atau kebutuhan untuk memasukkan tag gaya apa pun secara dinamis.

Gaya hanya ditimpa, tetapi Anda tidak perlu mengurai apa pun, mengapa Anda?

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

_{Tidak dapat digunakan removeProperty(), karena tidak akan menghapus !importantaturan di Chrome.
Tidak dapat digunakan element.style[property] = '', karena hanya menerima camelCase di Firefox.}

Anda mungkin bisa membuat ini lebih pendek dengan jQuery, tetapi fungsi vanilla ini akan berjalan di browser modern, Internet Explorer 8, dll.

Inilah yang saya lakukan setelah menghadapi masalah ini ...

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

Solusi ini tidak mengesampingkan salah satu gaya sebelumnya, hanya berlaku yang Anda butuhkan:

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

Jika tidak begitu relevan dan karena Anda berurusan dengan satu elemen #elem, Anda dapat mengubah id-nya menjadi sesuatu yang lain dan menatanya sesuai keinginan ...

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

Dan di CSS Anda:

#cheaterId { width: 100px;}

Alih-alih menggunakan css()fungsi coba addClass()fungsi:

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

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

Solusi termudah dan terbaik untuk masalah ini dari saya adalah cukup menggunakan addClass () daripada .css () atau .attr ().

Sebagai contoh:

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

Dan di file CSS Anda:

.importantClass {
    width: 100px !important;
}

FYI, itu tidak berfungsi karena jQuery tidak mendukungnya. Ada tiket yang diajukan pada 2012 ( # 11173 $ (elem) .css ("properti", "nilai! Penting") gagal ) yang akhirnya ditutup sebagai WONTFIX.

Sebagian besar jawaban ini sekarang sudah usang, dukungan IE7 tidak menjadi masalah.

Cara terbaik untuk melakukan ini yang mendukung IE11 + dan semua browser modern adalah:

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

Atau jika Anda mau, Anda bisa membuat plugin jQuery kecil yang melakukan ini. Plugin ini sangat cocok dengan css()metode jQuery sendiri dalam parameter yang didukungnya:

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

Contoh jsfiddle di sini .

Pertama-tama kita harus menghapus gaya sebelumnya. Saya menghapusnya menggunakan ekspresi reguler. Berikut adalah contoh untuk mengubah warna:

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

Cara alternatif untuk menambahkan gaya di kepala:

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

Ini menambahkan gaya setelah semua file CSS Anda sehingga akan memiliki prioritas lebih tinggi daripada file CSS lainnya dan akan diterapkan.

Mungkin terlihat seperti ini:

Cache

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

Setel CSS

node.style.setProperty ('lebar', '100px', 'penting');

Hapus CSS

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

Saya pikir ini berfungsi OK dan dapat menimpa CSS lain sebelumnya (ini: elemen DOM):

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

Lakukan seperti ini:

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

Solusi ini akan meninggalkan semua javascript yang dikomputasi dan menambahkan tag penting ke dalam elemen: Anda dapat melakukannya (Mis jika Anda perlu mengatur lebar dengan tag penting)

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

Tiga contoh kerja

Saya memiliki situasi yang sama, tetapi saya menggunakan .find () setelah berjuang dengan .closest () untuk waktu yang lama dengan banyak variasi.

Kode Contoh

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

Bekerja: http://jsfiddle.net/fx4mbp6c/

Ini mungkin atau mungkin tidak sesuai untuk situasi Anda, tetapi Anda dapat menggunakan penyeleksi CSS untuk banyak jenis situasi ini.

Misalnya, jika Anda ingin instance ke-3 dan ke-6 dari .cssText memiliki lebar yang berbeda, Anda dapat menulis:

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

Atau:

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

Saya akan menganggap Anda mencobanya tanpa menambahkan !important?

CSS sebaris (yang merupakan cara JavaScript menambahkan gaya) menimpa CSS stylesheet. Saya cukup yakin itulah masalahnya bahkan ketika aturan CSS stylesheet telah !important.

Pertanyaan lain (mungkin pertanyaan bodoh tetapi harus ditanyakan.): Apakah elemen yang Anda coba kerjakan display:block;atau display:inline-block;?

Tidak mengetahui keahlian Anda dalam CSS ... elemen sebaris tidak selalu berperilaku seperti yang Anda harapkan.

Kita dapat menggunakan setProperty atau cssText untuk menambahkan !important ke elemen DOM menggunakan JavaScript.

Contoh 1:

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

Contoh 2:

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

Saya juga menemukan bahwa elemen atau add-on tertentu (seperti Bootstrap) memiliki beberapa case kelas khusus di mana mereka tidak bermain dengan baik !importantatau work-arounds seperti.addClass/.removeClass , dan dengan demikian Anda harus mengaktifkan / mematikannya.

Misalnya, jika Anda menggunakan sesuatu seperti <table class="table-hover">satu-satunya cara untuk berhasil memodifikasi elemen seperti warna baris adalah dengan mengaktifkan table-hover/ menonaktifkan kelas, seperti ini

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

Semoga perbaikan ini bermanfaat bagi seseorang! :)

Saya memiliki masalah yang sama ketika mencoba mengubah warna teks dari menu-item ketika "event". Cara terbaik yang saya temukan ketika saya memiliki masalah yang sama adalah:

Langkah pertama: Buat, di CSS Anda, kelas baru dengan tujuan ini, misalnya:

.colorw{ color: white !important;}

Langkah terakhir: Terapkan kelas ini menggunakan metode addClass sebagai berikut:

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

Masalah terpecahkan.

Solusi teraman untuk ini adalah menambahkan kelas dan kemudian melakukan keajaiban dalam CSS :-), addClass()dan removeClass()harus melakukan pekerjaan.

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

Pendekatan alternatif secara dinamis membuat dan memperbarui kelas CSS dalam JavaScript. Untuk melakukan itu, kita bisa menggunakan elemen style dan perlu menggunakan ID untuk elemen style sehingga kita bisa memperbarui kelas 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)