Tôi gặp khó khăn khi áp dụng một phong cách đó là !important. Tôi đã thử:

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

Điều này không có gì ; không có phong cách chiều rộng nào được áp dụng. Có cách jQuery-ish nào để áp dụng một kiểu như vậy mà không phải ghi đè lên cssText(điều đó có nghĩa là tôi cần phải phân tích nó trước, v.v.)?

Chỉnh sửa : Tôi nên thêm rằng tôi có một biểu định kiểu với một !importantkiểu mà tôi đang cố gắng ghi đè bằng một !importantkiểu nội tuyến, do đó, sử dụng .width()và tương tự không hoạt động vì nó bị ghi đè bởi !importantkiểu bên ngoài của tôi .

Ngoài ra, giá trị sẽ ghi đè giá trị trước đó được tính toán , vì vậy tôi không thể đơn giản tạo một kiểu bên ngoài khác.

Vấn đề là do jQuery không hiểu !importantthuộc tính và do đó không áp dụng quy tắc.

Bạn có thể giải quyết vấn đề đó và áp dụng quy tắc bằng cách tham khảo nó, thông qua addClass():

.importantRule { width: 100px !important; }

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

Hoặc bằng cách sử dụng attr():

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

Tuy nhiên, cách tiếp cận thứ hai sẽ bỏ đặt bất kỳ quy tắc kiểu nội tuyến nào được đặt trước đó. Vì vậy, sử dụng cẩn thận.

Tất nhiên, có một lập luận tốt rằng phương pháp của @Nick Craver dễ dàng / khôn ngoan hơn.

Ở trên, attr()cách tiếp cận được sửa đổi một chút để giữ nguyên stylechuỗi / thuộc tính ban đầu và được sửa đổi theo đề xuất của falko trong một nhận xét:

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

Tôi nghĩ rằng tôi đã tìm thấy một giải pháp thực sự. Tôi đã biến nó thành một chức năng mới:

jQuery.style(name, value, priority);

Bạn có thể sử dụng nó để nhận các giá trị .style('name')giống như .css('name'), nhận CSSStyleDeclaration .style()và cũng đặt các giá trị - với khả năng chỉ định mức độ ưu tiên là 'quan trọng'. Xem cái này .

Bản giới thiệu

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

Đây là đầu ra:

null
red
blue
important

Chức năng

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

Xem phần này để biết ví dụ về cách đọc và đặt các giá trị CSS. Vấn đề của tôi là tôi đã thiết lập!important chiều rộng trong CSS của mình để tránh xung đột với CSS chủ đề khác, nhưng mọi thay đổi tôi thực hiện đối với chiều rộng trong jQuery sẽ không bị ảnh hưởng vì chúng sẽ được thêm vào thuộc tính style.

Khả năng tương thích

Để cài đặt mức độ ưu tiên bằng setPropertychức năng, Điều khoản này cho biết có hỗ trợ cho IE 9+ và tất cả các trình duyệt khác. Tôi đã thử với IE 8 và nó đã thất bại, đó là lý do tại sao tôi xây dựng hỗ trợ cho nó trong các chức năng của mình (xem ở trên). Nó sẽ hoạt động trên tất cả các trình duyệt khác sử dụng setProperty, nhưng nó sẽ cần mã tùy chỉnh của tôi để hoạt động trong <IE 9.

Bạn có thể đặt chiều rộng trực tiếp bằng cách sử dụng .width()như thế này:

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

Đã cập nhật nhận xét: Bạn cũng có tùy chọn này, nhưng nó sẽ thay thế tất cả css trên phần tử, vì vậy không chắc chắn nó có khả thi hơn không:

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

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

Lưu ý: Sử dụng Chrome có thể trả về một lỗi như:

elem [0] .style.removeAttribution không phải là một hàm

Thay đổi dòng để sử dụng .removePropertychức năng như để elem[0].style.removeProperty('width');khắc phục sự cố.

Câu trả lời của David Thomas mô tả một cách sử dụng $('#elem').attr('style', …), nhưng cảnh báo rằng việc sử dụng nó sẽ xóa các kiểu được đặt trước đó trong stylethuộc tính. Đây là một cách sử dụng attr()mà không có vấn đề đó:

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

Là một chức năng:

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

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

Dưới đây là bản demo của Bin Bin .

Sau khi đọc các câu trả lời khác và thử nghiệm, đây là những gì làm việc cho tôi:

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

Điều này không hoạt động trong IE 8 trở xuống, mặc dù.

Bạn có thể làm được việc này:

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

Sử dụng "cssText" làm tên thuộc tính và bất cứ điều gì bạn muốn thêm vào CSS làm giá trị của nó.

Bạn có thể đạt được điều này theo hai cách:

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

Không cần phải đi đến sự phức tạp của câu trả lời của @ AramKocharyan, cũng như không cần phải chèn bất kỳ thẻ kiểu nào một cách linh hoạt.

Chỉ ghi đè lên phong cách, nhưng bạn không phải phân tích bất cứ điều gì, tại sao bạn?

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

_{Không thể sử dụng removeProperty(), vì nó sẽ không xóa !importantcác quy tắc trong Chrome.
Không thể sử dụng element.style[property] = '', vì nó chỉ chấp nhận camelCase trong Firefox.}

Bạn có thể có thể làm cho nó ngắn hơn với jQuery, nhưng hàm vanilla này sẽ chạy trên các trình duyệt hiện đại, Internet Explorer 8, v.v.

Đây là những gì tôi đã làm sau khi gặp phải vấn đề này ...

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

Giải pháp này không ghi đè bất kỳ kiểu nào trước đó, nó chỉ áp dụng kiểu bạn cần:

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

Nếu nó không liên quan lắm và vì bạn đang xử lý một yếu tố #elem, bạn có thể thay đổi id của nó thành một thứ khác và định kiểu nó theo ý muốn ...

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

Và trong CSS của bạn:

#cheaterId { width: 100px;}

Thay vì sử dụng css()chức năng hãy thử addClass()chức năng:

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

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

Giải pháp dễ nhất và tốt nhất cho vấn đề này từ tôi là chỉ cần sử dụng addClass () thay vì .css () hoặc .attr ().

Ví dụ:

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

Và trong tệp CSS của bạn:

.importantClass {
    width: 100px !important;
}

FYI, nó không hoạt động vì jQuery không hỗ trợ nó. Có một vé được nộp vào năm 2012 ( # 11173 $ (elem) .css ("tài sản", "giá trị! Quan trọng") không thành công ) cuối cùng đã bị đóng dưới dạng WONTFIX.

Hầu hết các câu trả lời này hiện đã lỗi thời, hỗ trợ IE7 không phải là vấn đề.

Cách tốt nhất để làm điều này hỗ trợ IE11 + và tất cả các trình duyệt hiện đại là:

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

Hoặc nếu bạn muốn, bạn có thể tạo một plugin jQuery nhỏ thực hiện việc này. Plugin này rất khớp với css()phương thức riêng của jQuery trong các tham số mà nó hỗ trợ:

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

Ví dụ jsfiddle ở đây .

Chúng ta cần đầu tiên để loại bỏ các phong cách trước đó. Tôi loại bỏ nó bằng cách sử dụng một biểu thức thông thường. Dưới đây là một ví dụ để thay đổi màu sắc:

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

Một cách khác để nối thêm phong cách trong đầu:

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

Điều này nối thêm kiểu sau tất cả các tệp CSS của bạn để nó có mức ưu tiên cao hơn các tệp CSS khác và sẽ được áp dụng.

Có thể nó trông như thế này:

Bộ nhớ cache

nút var = $ ('. bộ chọn') [0];
HOẶC LÀ
var nút = document.querySelector ('. selector');

Đặt CSS

node.style.setProperty ('width', '100px', 'quan trọng');

Xóa CSS

node.style.removeProperty ('width');
HOẶC LÀ
node.style. thong = '';

Tôi nghĩ rằng nó hoạt động tốt và có thể ghi đè bất kỳ CSS nào khác trước đây (phần tử DOM này):

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

Làm như thế này:

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

Giải pháp này sẽ để lại tất cả các javascript được tính toán và thêm thẻ quan trọng vào thành phần: Bạn có thể làm (Ví dụ: nếu bạn cần đặt chiều rộng với thẻ quan trọng)

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

Ba ví dụ làm việc

Tôi đã có một tình huống tương tự, nhưng tôi đã sử dụng .find () sau khi vật lộn với .closest () trong một thời gian dài với nhiều biến thể.

Mã ví dụ

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

Thay thế

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

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

Làm việc: http://jsfiddle.net/fx4mbp6c/

Nó có thể phù hợp hoặc không phù hợp với tình huống của bạn nhưng bạn có thể sử dụng các bộ chọn CSS cho rất nhiều loại tình huống này.

Ví dụ: nếu bạn muốn phiên bản thứ 3 và thứ 6 của .cssText có chiều rộng khác nhau, bạn có thể viết:

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

Hoặc là:

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

Tôi sẽ giả sử bạn đã thử nó mà không cần thêm !important?

CSS nội tuyến (là cách JavaScript thêm kiểu dáng) ghi đè CSS biểu định kiểu. Tôi khá chắc chắn đó là trường hợp ngay cả khi quy tắc CSS bản định kiểu có !important.

Một câu hỏi khác (có thể là một câu hỏi ngu ngốc nhưng phải được hỏi.): Là yếu tố bạn đang cố gắng làm việc display:block;hay display:inline-block;?

Không biết chuyên môn của bạn về CSS ... các yếu tố nội tuyến không luôn luôn hoạt động như bạn mong đợi.

Chúng ta có thể sử dụng setProperty hoặc cssText để thêm !importantvào phần tử DOM bằng JavaScript.

Ví dụ 1:

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

Ví dụ 2:

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

Tôi cũng phát hiện ra rằng một số yếu tố hoặc tiện ích bổ sung (như Bootstrap) có một số trường hợp lớp đặc biệt khi chúng không chơi tốt !importanthoặc các công việc khác như thế .addClass/.removeClass, và do đó bạn phải bật / tắt chúng.

Ví dụ: nếu bạn sử dụng một cái gì đó giống như <table class="table-hover">cách duy nhất để sửa đổi thành công các phần tử như màu của các hàng là bật / tắt table-hoverlớp, như thế này

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

Hy vọng rằng công việc này sẽ hữu ích cho ai đó! :)

Tôi gặp vấn đề tương tự khi cố gắng thay đổi màu văn bản của mục menu khi "sự kiện". Cách tốt nhất tôi tìm thấy khi gặp vấn đề tương tự là:

Bước đầu tiên: Tạo, trong CSS của bạn, một lớp mới với mục đích này, ví dụ:

.colorw{ color: white !important;}

Bước cuối cùng: Áp dụng lớp này bằng phương thức addClass như sau:

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

Vấn đề được giải quyết.

Cách giải quyết an toàn nhất cho vấn đề này là thêm một lớp và sau đó thực hiện phép thuật trong CSS :-) addClass()và removeClass()nên thực hiện công việc.

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

Một cách tiếp cận khác là tự động tạo và cập nhật lớp CSS trong JavaScript. Để làm điều đó, chúng ta có thể sử dụng phần tử style và cần sử dụng ID cho phần tử style để có thể cập nhật lớp 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)