(.Css) का उपयोग करके महत्वपूर्ण आवेदन कैसे करें?

Question

मुझे एक स्टाइल लागू करने में परेशानी हो रही है !important। मैंने कोशिश की:

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

यह कुछ नहीं करता है ; कोई भी चौड़ाई शैली लागू नहीं की जाती है। क्या इस तरह की शैली को लागू करने के बिना एक jQuery-ish तरीका है cssTextजो ओवरराइट करने के लिए है (जिसका मतलब है कि मुझे इसे पहले पार्स करने की आवश्यकता होगी, आदि)?

संपादित करें : मुझे यह जोड़ना चाहिए कि मेरे पास एक शैली के साथ एक स्टाइलशीट !importantहै जिसे मैं एक !importantस्टाइल इनलाइन के साथ ओवरराइड करने की कोशिश कर रहा हूं , इसलिए इसका उपयोग करना .width()और इस तरह काम नहीं करता है क्योंकि यह मेरी बाहरी !importantशैली से ओवरराइड हो जाता है ।

साथ ही, पिछले मान को ओवरराइड करने वाले मान की गणना की जाती है , इसलिए मैं बस एक और बाहरी शैली नहीं बना सकता।

Comments

ध्यान देने योग्य बात यह है कि यह वास्तव में क्रोम में काम करता है (मेरे लिए कम से कम), लेकिन फ़ायरफ़ॉक्स में नहीं।

— पीटर जरिक

यह मेरे लिए Chrome 17.x और Safari 5.1.1 में भी काम करता है, लेकिन FF 8.0 में नहीं।

— डेविडजे

JQuery 1.8.2 का उपयोग करके क्रोमियम 20.0.x पर मेरे लिए काम नहीं करता है।

— अल्बा मेंडेज़

jQuery बग # 11173 फिक्सिंग के बारे में .cssऔर !importantjQuery कोर में था। बग को "ठीक नहीं होगा" के रूप में बंद कर दिया गया था। हालांकि, उस बग का परीक्षण मामला इस प्रश्न में एक के रूप में प्रतिबंधात्मक नहीं था - परीक्षण के मामले में इनलाइन !importantशैली नहीं थी जो इसे ओवरराइड करने की कोशिश कर रही थी। इस प्रकार, उस बग में प्रस्तावित वर्कअराउंड इस मामले में काम नहीं करेगा।

— रोरी ओ'केन

ओवरसीडिंग के संभावित डुप्लिकेट ! सीएसएस या jquery के साथ महत्वपूर्ण - जबकि यह एक पुराना है, और अधिक उच्च मतदान है, दूसरे को सबसे स्पष्ट, सबसे मूल्यवान उत्तर मिला है।

— जेसन सी

Answer 1

समस्या jQuery द्वारा !importantविशेषता को नहीं समझने के कारण होती है, और जैसे नियम लागू करने में विफल रहता है।

आप उस समस्या के आसपास काम करने में सक्षम हो सकते हैं, और नियम का उल्लेख करके, इसके माध्यम से लागू कर सकते हैं addClass():

.importantRule { width: 100px !important; }

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

या उपयोग करके attr():

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

उत्तरार्द्ध दृष्टिकोण किसी भी पहले से निर्धारित इन-लाइन शैली नियमों को परेशान करेगा, हालांकि। इसलिए सावधानी से प्रयोग करें।

बेशक, एक अच्छा तर्क है कि @Nick क्रेवर की विधि आसान / समझदार है।

उपरोक्त, attr()दृष्टिकोण मूल styleस्ट्रिंग / गुणों को संरक्षित करने के लिए थोड़ा संशोधित किया गया है , और एक टिप्पणी में फाल्को द्वारा सुझाए अनुसार संशोधित किया गया है :

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

Comments

मैं आपके उत्तरार्द्ध दृष्टिकोण की ओर झुक रहा हूं, लेकिन इसके बारे में दुख की बात यह है कि बीमार शायद पिछले cssText को पार्स करने के लिए समाप्त हो गया है क्योंकि मैं सिर्फ इसे नहीं छोड़ सकता

— mkoryak

आह, माफ करना, यह कभी-कभी नहीं मिल सका, अंग्रेजी हास्य मेरी समझ से परे है ... :)

— सिनान

नेस्टेड कोट्स ('' चौड़ाई: 100px? महत्वपूर्ण "') के साथ क्या है? यह मेरे लिए काम नहीं करता था, लेकिन जब मैंने इसके काम के भीतर के उद्धरणों को हटा दिया। धन्यवाद!

— पीटर जरिक

जब शैली खाली होती है तो छोटा फिक्स: $ ('# elem')। अटर ('स्टाइल', फंक्शन (i, s) {रिटर्न (s '') + 'चौड़ाई: 100px? महत्वपूर्ण?'})

— फल्को

आपको @ फाल्को के फिक्स को जोड़ना चाहिए, जैसे कि फ़ायरफ़ॉक्स में आपका आखिरी स्निपेट स्टाइल सेट हो जाएगा 'undefinedwidth: 100px !important;'जब मौजूदा स्टाइल खाली हो।

— acccjunior

Answer 2

मुझे लगता है कि मुझे एक वास्तविक समाधान मिल गया है। मैंने इसे एक नए समारोह में बनाया है:

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अपने सीएसएस में चौड़ाई के लिए अन्य विषय सीएसएस के साथ टकराव से बचने के लिए सेट कर दिया था , लेकिन मैंने jQuery में चौड़ाई में जो भी बदलाव किए हैं, वे अप्रभावित रहेंगे क्योंकि उन्हें शैली विशेषता में जोड़ा जाएगा।

अनुकूलता

setPropertyफ़ंक्शन का उपयोग करते हुए प्राथमिकता के साथ सेट करने के लिए , यह आलेख कहता है कि IE 9+ और अन्य सभी ब्राउज़रों के लिए समर्थन है। मैंने IE 8 के साथ कोशिश की है और यह विफल रहा है, यही वजह है कि मैंने अपने कार्यों में इसके लिए समर्थन बनाया (ऊपर देखें)। यह सेटप्रॉपर्टी का उपयोग करके अन्य सभी ब्राउज़रों पर काम करेगा, लेकिन इसे <IE 9 में काम करने के लिए मेरे कस्टम कोड की आवश्यकता होगी।

Comments

क्या आपने अन्य ब्राउज़रों पर इसका परीक्षण किया है?

— मकोरिक

JQuery.important प्लगइन भी है जो कुछ साल पहले प्रकाशित हुआ था। मैं इसे केवल एक मामूली मुद्दे के साथ उत्पादन में उपयोग कर रहा हूं (उनके मुद्दे टैब देखें।

— कॉलिन

$ ('.someclass') .each (फ़ंक्शन () {this.style.setProperty ('बॉर्डर', 'कोई नहीं', 'महत्वपूर्ण');}); stackoverflow.com/questions/11962962/… सरल, क्लीनर और अधिक कुशल।

इससे निपटने का एकमात्र अच्छा तरीका कक्षाओं का उपयोग करना है, न कि प्रत्यक्ष शैली इंजेक्शन।

— रिचर्ड

@ रिचर्ड, इससे निपटने का एकमात्र अच्छा तरीका आपकी शैलियों में उपयोग नहीं करना है !important, कम से कम उन चीजों के लिए जो आप jQuery के साथ बदलने जा रहे हैं ... जब तक वे आपकी शैली हैं। यदि आपका कोड एक छात्र द्वारा कोड किए गए पृष्ठ के भीतर चलता है, जो !importantहर दूसरी शैली पर थप्पड़ मारकर विशिष्टता नियमों की अपनी अज्ञानता के चारों ओर काम करता है, तो आप इन सबसे !importantsपहले या बाद में राम मुख में जा रहे हैं ।

— सेप्टग्राम

Answer 3

आप .width()इस तरह से सीधे चौड़ाई सेट कर सकते हैं :

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

टिप्पणियों के लिए अपडेट किया गया: आपके पास यह विकल्प भी है, लेकिन यह तत्व पर सभी सीएसएस को बदल देगा, इसलिए यह सुनिश्चित न करें कि यह अधिक व्यवहार्य है:

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

Comments

ठीक है, मैं एक उदाहरण के रूप में उपयोग करता हूं, जो मुझे परवाह है वह सेटिंग है!

— मोर्यक

मैंने अपनी स्थिति को बेहतर ढंग से दर्शाने के लिए प्रश्न को संपादित किया .. मूल रूप से मेरे पास एक बाहरी-महत्वपूर्ण चौड़ाई है जो कि कुछ खराब है जो मुझे इनलाइन को ओवरराइड करना चाहिए। चौड़ाई () इस कारण से काम नहीं करता है

— mkoryak

@mkoryak - केवल अन्य गैर-वर्ग विकल्प के साथ अपडेट किया गया, यह सुनिश्चित नहीं है कि यह आपकी स्थिति में फिट होगा या नहीं।

— निक Craver

लेकिन यह सीधे तत्व पर लागू किसी भी अन्य शैली को ओवरराइड करेगा। stackoverflow.com/a/11723492/491044 को लागू करना सबसे आसान है।

— त्रिगालिया

$('#elem').css('cssText', $('#elem').css('cssText')+'width: 100px !important');पिछले मान से इसे ओवरराइड करने से रोकें

— Abel Callejo

Answer 4

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

नोट: Chrome का उपयोग करने से त्रुटि वापस आ सकती है जैसे:

एलएम [0] .style.removeAttribute एक फ़ंक्शन नहीं है

.removePropertyफ़ंक्शन का उपयोग करने के लिए लाइन को बदलना जैसे elem[0].style.removeProperty('width');कि समस्या को ठीक करना।

Comments

यह सबसे अच्छे उत्तरों में से एक है। सरल और यह काम करता है। और इसके लिए बहुत स्पष्टीकरण की आवश्यकता नहीं है। यह सिर्फ नियमित जावास्क्रिप्ट है, सिवाय jQuery के चयनकर्ता के। jQuery "महत्वपूर्ण" के लिए समर्थन प्रदान नहीं करता है, इसलिए नियमित JS का उपयोग करने का तरीका है

— OMA

यदि आप इसके साथ वेनिला जाना चाहते हैं, तो बस var = document.getElementById('elem');एलएम पर शैली के तरीके बनाएं और प्रदर्शन करें (जैसा कि एलएम [0] के विपरीत)। चीयर्स।

— विनम्रता

वेनिला जेएस में, रिमूव एट्रिब्यूट काम नहीं करता है। निम्न कार्य करें। var style = document.getElementById('elem'); style.removeProperty('width'); style.setProperty('width, '100px', 'important')

— मकोका

के साथ भी समस्याएं थीं .removeAttribute। यह एक IE-only विधि लगती है । @mcoenca टिप्पणी सही है; .removePropertyठीक काम करता है। यह MSDN के

— फेलिपएल्स 10

@ डायजन, बहुत देर से जवाब के लिए खेद है, लेकिन यह काम करना चाहिए:elem.next().get(0).style...

— RedClover

Answer 5

डेविड थॉमस का जवाब उपयोग करने का एक तरीका बताता है $('#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');

यहाँ एक जेएस बिन डेमो है ।

Comments

addStyleAttribute()jQuery के.css() समान पैरामीटर लेने के लिए भी संशोधित किया जा सकता है । उदाहरण के लिए, यह सीएसएस संपत्तियों के मानचित्र को उनके मूल्यों तक ले जाने में सहायता कर सकता है। यदि आपने ऐसा किया है, तो आप मूल रूप .css()से !importantबग के साथ फिर से लागू कर रहे होंगे, लेकिन बिना किसी अनुकूलन के।

— रोरी ओ'केन

सीएसएस वर्ग में चौड़ाई को परिभाषित करने के बाद से यह मेरे लिए अच्छी तरह से काम करता था और मुझे इसे ब्राउज़र विंडो और सामग्री की चौड़ाई के आधार पर एक गणना के साथ गतिशील रूप से ओवरराइड करने की आवश्यकता थी।

— क्रिस रास्को

Answer 6

अन्य उत्तरों को पढ़ने और प्रयोग करने के बाद, यह मेरे लिए काम करता है:

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

यह IE 8 और इसके बाद के संस्करण में काम नहीं करता है।

Comments

और चूंकि हमें अभी भी IE8 (हम में से कुछ, अशुभ) का समर्थन करना है - यह अच्छा नहीं है।

— mkoryak

Answer 7

तुम यह केर सकते हो:

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

संपत्ति के नाम के रूप में "cssText" का उपयोग करना और जो भी आप चाहते हैं सीएसएस को इसके मूल्य के रूप में जोड़ा जाना चाहिए।

Comments

इसका नकारात्मक पक्ष यह है कि cssTextइससे पहले जो कुछ भी वहां था उसे ओवरराइट कर देगा - इसलिए आप वास्तव में इसे स्वतंत्र रूप से उपयोग नहीं कर सकते

— mkoryak

वैसे भी, आप $ ("# elem") का उपयोग कर सकते हैं। css ("cssText", "+;: 100px।-important;");

— lexa-b

Answer 8

आप इसे दो तरीकों से प्राप्त कर सकते हैं:

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

Comments

वास्तव में, .prop()फ़ंक्शन jQuery v1.6 में जोड़ा गया था और क्रोम में काम करेगा ... यह प्रोप पेज से उद्धृत किया गया है: jQuery 1.6 से पहले, .attr()विधि ने कुछ विशेषताओं को पुनर्प्राप्त करते समय कभी-कभी संपत्ति मूल्यों को ध्यान में रखा, जिससे असंगत व्यवहार हो सकता है। 1.6 jQuery के रूप में, .prop()विधि संपत्ति के मूल्यों को स्पष्ट रूप से पुनर्प्राप्त करने का एक तरीका प्रदान करती है, जबकि .attr()विशेषताओं को पुनः प्राप्त करती है।

— मोटी

जेनेरिक समाधान के लिए बहुत अच्छा विचार नहीं है। आप इसका उपयोग करके अपनी मौजूदा शैली को ओवरराइड कर सकते हैं।

— नीरव झवेरी

Answer 9

@ अरामकोचरन के उत्तर की जटिलता में जाने की आवश्यकता नहीं है, न ही किसी शैली के टैग को गतिशील रूप से सम्मिलित करने की आवश्यकता है।

बस शैली को अधिलेखित करें, लेकिन आपको कुछ भी पार्स करने की ज़रूरत नहीं है, आप क्यों करेंगे?

// 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क्रोम में नियमों को नहीं हटाएगा ।
उपयोग नहीं कर सकते element.style[property] = '', क्योंकि यह केवल फ़ायरफ़ॉक्स में कैमलकेस स्वीकार करता है।}

आप शायद इसे jQuery के साथ छोटा बना सकते हैं, लेकिन यह वेनिला फ़ंक्शन आधुनिक ब्राउज़रों, इंटरनेट एक्सप्लोरर 8, आदि पर चलेगा।

Answer 10

यहाँ इस समस्या का सामना करने के बाद मैंने क्या किया है ...

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

Comments

धन्यवाद, यह कस्टम प्लगइन की तुलना में लागू करने के लिए बहुत आसान है (भले ही यह अन्य इनलाइन शैलियों को नष्ट कर देता है)।

— फ्रॉग्ज

Answer 11

यह समाधान पिछले शैलियों में से किसी को भी ओवरराइड नहीं करता है, यह सिर्फ आपकी जरूरत के अनुसार लागू होता है:

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

Answer 12

यदि यह इतना प्रासंगिक नहीं है और जब से आप एक तत्व के साथ काम कर रहे हैं जो है #elem, तो आप इसकी आईडी को किसी और चीज़ में बदल सकते हैं और इसे अपनी इच्छानुसार स्टाइल कर सकते हैं ...

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

और अपने सीएसएस में:

#cheaterId { width: 100px;}

Comments

आप केवल css वर्ग जोड़ने के बजाय css लागू करने के लिए id क्यों बदलते हैं?

— टेकपा

Answer 13

css()फ़ंक्शन का उपयोग करने के बजाय फ़ंक्शन का प्रयास करें addClass():

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

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

Comments

ओपी ने लिखा है कि संपत्ति के मूल्य की गणना गतिशील रूप से की जाती है, इसलिए आपका जवाब उसके लिए काम नहीं करता है।

— सेबेस्टियन जार्टनर

इस समाधान ने मेरे लिए काम किया। मुझे नहीं लगता कि मुझे मूल पोस्टर के रूप में सटीक आवश्यकताएं हैं लेकिन यह काम करता है जहां सीएसएस () नहीं करता है।

— लेकेई

यह वास्तव में एक समस्या का पूरी तरह से उचित समाधान है ... बस यह समस्या नहीं है!

— मोर्यक

Answer 14

मेरे लिए इस समस्या का सबसे आसान और सबसे अच्छा समाधान केवल .Cls () और .attr () के बजाय addClass () का उपयोग करना था।

उदाहरण के लिए:

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

और आपकी CSS फ़ाइल में:

.importantClass {
    width: 100px !important;
}

Comments

चूंकि चौड़ाई की गणना जावास्क्रिप्ट में की जाती है इसलिए यह समस्या का समाधान नहीं करता है।

— क्रिस

Answer 15

FYI करें, यह काम नहीं करता है क्योंकि jQuery इसका समर्थन नहीं करता है। 2012 ( # 11173 $ (elem) .css ("संपत्ति", "महत्वपूर्ण! महत्वपूर्ण") विफल होने पर एक टिकट दर्ज किया गया था जो अंततः WONTFIX के रूप में बंद हो गया था।

Answer 16

इनमें से अधिकांश उत्तर अब पुराने हो चुके हैं, 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 यहाँ ।

Comments

यह उत्तर है। अन्य उत्तरों की जांच करने की आवश्यकता नहीं है

— श्वेत

Answer 17

हमें पिछली शैली को हटाने के लिए पहले की आवश्यकता है। मैं इसे एक नियमित अभिव्यक्ति का उपयोग करके हटाता हूं। रंग बदलने के लिए यहां एक उदाहरण दिया गया है:

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

Comments

पता नहीं क्यों इतने सारे समाधान तत्व पर एक स्टाइल टैग को हैक करते हैं जब cssText विधि ठीक काम करती है ... उदाहरण के लिए$selector.css('cssText','margin-bottom: 0 !important')

— frumbert

Answer 18

शैली को सिर में लगाने का एक वैकल्पिक तरीका:

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

यह आपकी सभी सीएसएस फाइलों के बाद शैली को जोड़ता है, इसलिए इसमें अन्य सीएसएस फाइलों की तुलना में उच्च प्राथमिकता होगी और इसे लागू किया जाएगा।

Answer 19

हो सकता है कि यह इस तरह दिखे:

कैश

var नोड = $ ('चयनकर्ता') [0];
या
var नोड = document.querySelector ('चयनकर्ता');

CSS सेट करें

node.style.setProperty ('चौड़ाई', '100px', 'महत्वपूर्ण');

सीएसएस को हटा दें

node.style.removeProperty ( 'चौड़ाई');
या
नोड.स्टाइल। उपलब्धता = '';

Answer 20

मुझे लगता है कि यह ठीक काम करता है और इससे पहले किसी भी अन्य सीएसएस को अधिलेखित कर सकता है (यह: DOM तत्व):

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

Answer 21

इसको ऐसे करो:

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

Answer 22

यह समाधान सभी गणना किए गए जावास्क्रिप्ट को छोड़ देगा और तत्व में महत्वपूर्ण टैग जोड़ देगा: आप कर सकते हैं (उदाहरण के लिए यदि आपको महत्वपूर्ण टैग के साथ चौड़ाई सेट करने की आवश्यकता है)

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

Answer 23

काम के तीन उदाहरण

मेरे पास एक समान स्थिति थी, लेकिन मैंने कई बदलावों के साथ लंबे समय तक .closest () के साथ संघर्ष करने के बाद .find () का उपयोग किया।

उदाहरण कोड

// 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/

Comments

मैं आपको एक डाउन वोट दूंगा लेकिन आपको .indexOf()फ़ंक्शन को किसी ऐसी चीज़ से बदलने का विकल्प चुनना चाहिए जो अधिक क्रॉस-ब्राउज़र संगत हो। उपयोग, बल्कि, .match()या .test()इसके बजाय.indexOf()

— अलेक्जेंडर डिक्सन

लाइन में कोई अर्धविराम क्यों नहीं var contents = ?

— पीटर मॉर्टेंसन

Answer 24

यह आपकी स्थिति के लिए उपयुक्त हो सकता है या नहीं भी हो सकता है लेकिन आप इन प्रकार की स्थितियों के लिए CSS चयनकर्ताओं का उपयोग कर सकते हैं।

यदि, उदाहरण के लिए, आप .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;}

Comments

यह तीसरे और छठे उदाहरणों से मेल नहीं खाता है .cssText। :nth-of-type()जो आप सोचते हैं वह नहीं करता है। स्पष्टीकरण के लिए यहां देखें ।

— BoltClock

काफी उचित। मैंने लिंक पढ़ा, लेकिन मुझे यकीन नहीं है कि मैं आपकी बात समझ पाया हूं। यहाँ इस उद्देश्य के अनुसार काम करने वाली एक फिडेल है

— टिम कटिंग

आपकी फ़ाइडल में, आप liतत्वों की एक श्रृंखला के साथ काम कर रहे हैं । वे सभी एक ही तत्व प्रकार के हैं li, जो चयनकर्ता के साथ व्यवहार करता है। यदि आप एक ही मूल में अलग-अलग तत्वों को मिलाते हैं, तो :nth-of-type()अलग तरह से व्यवहार करेंगे, खासकर इसलिए जब आप मिश्रण में एक वर्ग चयनकर्ता जोड़ते हैं।

— BoltClock

Answer 25

मुझे लगता है आप इसे जोड़ने के बिना की कोशिश की !important?

इनलाइन सीएसएस (जो कि जावास्क्रिप्ट कैसे स्टाइल जोड़ता है) स्टाइलशीट सीएसएस को ओवरराइड करता है। मुझे पूरा यकीन है कि स्टाइलशीट सीएसएस नियम में भी यही स्थिति है !important।

एक और सवाल (शायद एक बेवकूफ सवाल लेकिन पूछा जाना चाहिए।): तत्व आप पर काम करने के लिए कोशिश कर रहे हैं display:block;या display:inline-block;?

CSS में आपकी विशेषज्ञता को नहीं जानते ... इनलाइन तत्व हमेशा वैसा व्यवहार नहीं करते हैं जैसा आप अपेक्षा करते हैं।

Comments

css के नियम जिसमें महत्वपूर्ण ओवरराइड सब कुछ है, चाहे वे जहां भी स्थित हों, केवल अपवाद है कि इनलाइन स्टाइल के साथ! महत्वपूर्ण! स्टाइलशीट शैलियों को ओवरराइड करेगा। यह समस्या मुझे हो रही है। के साथ एक स्टाइलशीट नियम है! महत्वपूर्ण है कि मैं ओवरराइड करना चाहूंगा। whats अधिक, मुझे जिस मूल्य की आपूर्ति करने की आवश्यकता है वह JS के माध्यम से गणना की जानी चाहिए, इसलिए मैं केवल स्टाइलशीट को ही बदल सकता हूँ।

— मोर्यक

Answer 26

हम !importantजावास्क्रिप्ट का उपयोग करके DOM तत्व में जोड़ने के लिए setProperty या cssText का उपयोग कर सकते हैं ।

उदाहरण 1:

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

उदाहरण 2:

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

Answer 27

मैंने यह भी पाया कि कुछ तत्वों या ऐड-ऑन (जैसे बूटस्ट्रैप) में कुछ विशेष वर्ग के मामले होते हैं, जहां वे साथ !importantया अन्य काम के आस- पास अच्छे से नहीं खेलते हैं .addClass/.removeClass, और इस तरह आपको उन्हें चालू / बंद करना पड़ता है।

उदाहरण के लिए, यदि आप <table class="table-hover">तत्वों को सफलतापूर्वक संशोधित करने के एकमात्र तरीके की तरह कुछ का उपयोग करते हैं जैसे कि पंक्तियों के रंगों को table-hoverकक्षा को चालू / बंद करना है, तो इस तरह से

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

उम्मीद है कि यह काम-किसी के लिए उपयोगी होगा! :)

Answer 28

"इवेंट" के समय मुझे मेनू-आइटम के टेक्स्ट रंग को बदलने की कोशिश करने में समान समस्या थी। जब मुझे यह समस्या थी तो सबसे अच्छा तरीका मुझे मिला:

पहला कदम: अपने सीएसएस में, इस उद्देश्य के साथ एक नया वर्ग बनाएं, उदाहरण के लिए:

.colorw{ color: white !important;}

अंतिम चरण: AddClass विधि का उपयोग करके इस वर्ग को इस प्रकार लागू करें:

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

समस्या सुलझ गयी।

Comments

सबसे अच्छा जवाब, मेरी राय में। सबसे सुविधाजनक एक।

— सियाह

धन्यवाद @ सियाह सीएसएस पीपीएल के भार से जाना जाता है, लेकिन केवल कुछ के लिए ही समझा जाता है और यह दुखद है और कुछ प्रोग्रामर इसे घृणा करने के लिए

— बनाते हैं

हालांकि, यदि आप जेएस के साथ सीएसएस मूल्य उत्पन्न करना चाहते हैं, तो जेएस में परिभाषित रंग मूल्य को फॉरेक्सप्लिमेंट करें। अन्यथा यह अच्छा है।

— कार्ल पैपवर्थ

आप js में एक रंग क्यों परिभाषित करना चाहते हैं?

— JoelBonetR

Answer 29

इसके लिए सबसे सुरक्षित समाधान एक वर्ग जोड़ना है और फिर CSS :-) में जादू करना है , addClass()और removeClass()यह काम करना चाहिए।

Answer 30

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

एक वैकल्पिक दृष्टिकोण गतिशील रूप से जावास्क्रिप्ट में सीएसएस वर्ग का निर्माण और अद्यतन कर रहा है। ऐसा करने के लिए, हम शैली तत्व का उपयोग कर सकते हैं और शैली तत्व के लिए आईडी को नियोजित करने की आवश्यकता है ताकि हम 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)