!importantฉันกำลังมีปัญหาในการใช้สไตล์ที่เป็น ฉันได้พยายาม:

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

นี้จะไม่มีอะไร ; ไม่ใช้ลักษณะความกว้างใด ๆ มีวิธี jQuery-ish ของการใช้สไตล์ดังกล่าวโดยไม่ต้องเขียนทับcssText(ซึ่งหมายความว่าฉันต้องแยกมันก่อน)

แก้ไข : ฉันควรเพิ่มว่าฉันมีสไตล์ชีทที่มี!importantสไตล์ที่ฉันพยายามจะแทนที่ด้วย!importantอินไลน์สไตล์ดังนั้นการใช้.width()และสิ่งที่คล้ายกันใช้ไม่ได้เพราะมันถูกแทนที่ด้วย!importantสไตล์ภายนอกของฉัน

นอกจากนี้ค่าที่จะแทนที่ค่าก่อนหน้านี้ถูกคำนวณดังนั้นฉันจึงไม่สามารถสร้างสไตล์ภายนอกอื่นได้

ปัญหาเกิดจาก jQuery ไม่เข้าใจ!importantคุณลักษณะและเป็นเช่นนั้นล้มเหลวในการใช้กฎ

คุณอาจสามารถแก้ไขปัญหานั้นและใช้กฎโดยอ้างอิงกับทางaddClass():

.importantRule { width: 100px !important; }

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

หรือโดยการใช้attr():

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

แม้ว่าวิธีการหลังจะยกเลิกการตั้งค่ากฎสไตล์ในบรรทัดก่อนหน้านี้ ดังนั้นควรใช้ด้วยความระมัดระวัง

แน่นอนมีข้อโต้แย้งที่ดีว่าวิธีการของ @Nick Craver นั้นง่ายกว่า / ฉลาดกว่า

วิธีการข้างต้นได้รับattr()การแก้ไขเล็กน้อยเพื่อรักษาstyleสตริง / คุณสมบัติดั้งเดิมและแก้ไขตามคำแนะนำของfalkoในความคิดเห็น:

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

ฉันคิดว่าฉันพบทางออกที่แท้จริงแล้ว ฉันได้ทำให้มันเป็นฟังก์ชั่นใหม่:

jQuery.style(name, value, priority);

คุณสามารถใช้เพื่อรับค่า.style('name')เช่น.css('name')รับ CSSStyleDeclaration ด้วย.style()และตั้งค่า - ด้วยความสามารถในการระบุลำดับความสำคัญเป็น 'สำคัญ' ดูนี่สิ

การสาธิต

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

ดูสิ่งนี้สำหรับตัวอย่างวิธีการอ่านและตั้งค่า CSS ปัญหาของฉันคือฉันได้ตั้งค่า!importantความกว้างใน CSS ไว้แล้วเพื่อหลีกเลี่ยงความขัดแย้งกับ CSS ธีมอื่น ๆ แต่การเปลี่ยนแปลงใด ๆ ที่ฉันทำกับความกว้างใน jQuery จะไม่ได้รับผลกระทบเนื่องจากจะเพิ่มแอตทริบิวต์สไตล์

ความเข้ากันได้

สำหรับการตั้งค่าด้วยลำดับความสำคัญโดยใช้setPropertyฟังก์ชั่นบทความนี้กล่าวว่ามีการรองรับ IE 9+ และเบราว์เซอร์อื่น ๆ ทั้งหมด ฉันได้ลองกับ IE 8 แล้วและมันล้มเหลวซึ่งเป็นสาเหตุที่ฉันสร้างการรองรับในฟังก์ชั่นของฉัน (ดูด้านบน) มันจะทำงานกับเบราว์เซอร์อื่น ๆ ทั้งหมดโดยใช้ setProperty แต่จะต้องใช้รหัสที่กำหนดเองของฉันเพื่อทำงานใน <IE 9

คุณสามารถตั้งค่าความกว้างได้โดยตรงโดยใช้.width()สิ่งนี้:

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

อัปเดตสำหรับความคิดเห็น: คุณมีตัวเลือกนี้เช่นกัน แต่จะแทนที่ css ทั้งหมดในองค์ประกอบดังนั้นจึงไม่แน่ใจว่าเป็นไปได้หรือไม่:

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

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

หมายเหตุ: การใช้ Chrome อาจส่งคืนข้อผิดพลาดเช่น:

elem [0] .style.removeAttribute ไม่ใช่ฟังก์ชัน

การเปลี่ยนบรรทัดเพื่อใช้.removePropertyฟังก์ชั่นเช่นเพื่อelem[0].style.removeProperty('width');แก้ไขปัญหา

คำตอบของ David Thomasอธิบายถึงวิธีการใช้งาน$('#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

หลังจากอ่านคำตอบและทดลองอื่น ๆ แล้วนี่คือสิ่งที่เหมาะกับฉัน:

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

ไม่สามารถใช้งานได้ใน IE 8 และรุ่นที่ต่ำกว่า

คุณสามารถทำได้:

$("#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กฎใน Chrome
ใช้ไม่ได้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 ไม่รองรับ มีการยื่นตั๋วเมื่อปี 2555 ( # 11173 $ (elem) .css ("คุณสมบัติ", "ค่า! สำคัญ") ล้มเหลว ) ซึ่งในที่สุดก็ปิดเป็น WONTFIX

คำตอบส่วนใหญ่เหล่านี้ล้าสมัยไปแล้วการสนับสนุน IE7 ไม่ใช่ปัญหา

วิธีที่ดีที่สุดในการทำเช่นนี้ที่รองรับ IE11 + และเบราว์เซอร์สมัยใหม่ทั้งหมดคือ:

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

หรือถ้าคุณต้องการคุณสามารถสร้างปลั๊กอิน jQuery ขนาดเล็กที่ทำสิ่งนี้ ปลั๊กอินนี้ตรงกับcss()วิธีของ jQuery ในพารามิเตอร์ที่สนับสนุนอย่างใกล้ชิด:

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

ตัวอย่าง jsfiddle ที่นี่

เราจำเป็นต้องลบสไตล์ก่อนหน้าก่อน ฉันลบมันโดยใช้นิพจน์ทั่วไป นี่คือตัวอย่างสำหรับการเปลี่ยนสี:

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 อื่นและจะนำไปใช้

อาจจะเป็นแบบนี้:

ขุมทรัพย์

var node = $ ('. selector') [0];
หรือ
var node = document.querySelector ('. selector');

ตั้ง CSS

node.style.setProperty ('width', '100px', 'สำคัญ');

ลบ CSS

node.style.removeProperty ( 'กว้าง');
หรือ
node.style.width = '';

ฉันคิดว่ามันใช้งานได้และสามารถเขียนทับ CSS อื่น ๆ ก่อนหน้านี้ได้ (สิ่งนี้: องค์ประกอบ DOM):

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

ทำเช่นนี้:

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

โซลูชันนี้จะปล่อยให้จาวาสคริปต์ที่คำนวณแล้วทั้งหมดและเพิ่มแท็กที่สำคัญลงในองค์ประกอบ: คุณสามารถทำได้ (เช่นถ้าคุณต้องการตั้งค่าความกว้างด้วยแท็กที่สำคัญ)

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

ตัวอย่างการทำงานสามอย่าง

ฉันมีสถานการณ์ที่คล้ายกัน แต่ฉันใช้. 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'});

ทำงาน: http://jsfiddle.net/fx4mbp6c/

อาจหรือไม่เหมาะสมกับสถานการณ์ของคุณ แต่คุณสามารถใช้ตัวเลือก 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?

Inline CSS (ซึ่งเป็นวิธีที่ JavaScript เพิ่มการใส่สไตล์) แทนที่ CSS สไตล์ชีท ผมค่อนข้างมั่นใจว่าเป็นกรณีที่แม้ในขณะที่กฎสไตล์ชีต CSS !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;'

ฉันยังค้นพบว่าองค์ประกอบบางอย่างหรือส่วนเสริม (เช่น Bootstrap) มีบางกรณีพิเศษที่พวกเขาเล่นได้ไม่ดี!importantหรืออื่น ๆ ที่ชอบ.addClass/.removeClassและคุณต้องสลับเปิด / ปิด

ตัวอย่างเช่นหากคุณใช้บางอย่างเช่น<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 แบบไดนามิก ในการทำเช่นนั้นเราสามารถใช้อิลิเมนต์สไตล์และต้องใช้ ID สำหรับอิลิเมนต์สไตล์เพื่อให้เราสามารถอัปเดตคลาส 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)