কিভাবে প্রয়োগ করবেন! .এসএসএস () ব্যবহার করে গুরুত্বপূর্ণ?

Question

এমন স্টাইল প্রয়োগ করতে আমার সমস্যা হচ্ছে !important। আমি চেষ্টা করেছিলাম:

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

এটি কিছুই করে না ; কোনও প্রস্থ শৈলী প্রয়োগ করা হয়। ওভাররাইট না করে এই জাতীয় স্টাইল প্রয়োগ করার কোনও jQuery- ইশ উপায় আছে cssText(যার অর্থ এই যে আমি প্রথমে এটি বিশ্লেষণ করতে হবে, ইত্যাদি)?

সম্পাদনা : আমার যুক্ত করা উচিত যে !importantস্টাইলের সাথে আমার একটি স্টাইলশিট রয়েছে যা আমি কোনও !importantশৈলীর ইনলাইন দিয়ে ওভাররাইড করার চেষ্টা করছি , সুতরাং এটি ব্যবহার করা .width()এবং এটি আমার বাহ্যিক !importantশৈলীর দ্বারা ওভাররাইড হয়ে যাওয়ার পরে এই জাতীয় কাজ করে না ।

এছাড়াও, পূর্বের মানটি ওভাররাইড করবে এমন মান গণনা করা হয় , তাই আমি কেবল অন্য বাহ্যিক শৈলী তৈরি করতে পারি না।

Comments

লক্ষ্যণীয় বিষয় হ'ল এটি ক্রোমে (কমপক্ষে আমার জন্য) কাজ করে তবে ফায়ারফক্সে নয়।

— পিটার জারিক

এটি ক্রোম 17.x এবং সাফারি 5.1.1 এ আমার জন্যও কাজ করে তবে এফএফ 8.0 এ নয়।

— ডেভিডজে

JQuery 1.8.2 ব্যবহার করে ক্রোমিয়াম 20.0.x এ আমার জন্য কাজ করে না।

— আলবা মেন্ডিজ

jQuery বাগ # 11173 ঠিক করা .cssএবং !importantjQuery কোর সম্পর্কে ছিল । "ঠিক করবেন না" হিসাবে বাগটি বন্ধ ছিল। তবে, এই বাগের পরীক্ষার কেসটি এই প্রশ্নটির মতোই সীমাবদ্ধ ছিল না - পরীক্ষার ক্ষেত্রে একটি ইনলাইন !importantস্টাইল ছিল না যা এটি ওভাররাইড করার চেষ্টা করছে। সুতরাং, bu বাগের প্রস্তাবিত কাজের ক্ষেত্রে এই ক্ষেত্রে কাজ করবে না।

— ররি ও'কেনে

ওভাররাইডিংয়ের সম্ভাব্য সদৃশ ! সিএসএস বা জ্যাকুরির সাথে গুরুত্বপূর্ণ - যদিও এটির বয়স্ক এবং আরও বেশি ভোট দেওয়া হয়েছে, অন্যটির পক্ষে সবচেয়ে স্পষ্ট, সবচেয়ে মূল্যবান উত্তর পেয়েছে।

— জেসন সি

Answer 1

সমস্যাটি jQuery !importantঅ্যাট্রিবিউটটি না বোঝার কারণে এবং যেমনটি নিয়মটি প্রয়োগ করতে ব্যর্থ হয়।

আপনি এই সমস্যাটি ঘিরে কাজ করতে সক্ষম হতে পারেন এবং নিয়মটি উল্লেখ করে এটি প্রয়োগ করে addClass():

.importantRule { width: 100px !important; }

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

অথবা ব্যবহার করে attr():

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

যদিও পরবর্তী পদ্ধতির কোনও পূর্বনির্ধারিত ইন-লাইন শৈলীর নিয়মগুলি আনসেট করা হবে। তাই যত্ন সহকারে ব্যবহার করুন।

অবশ্যই একটি ভাল যুক্তি রয়েছে যে @ নিক ক্র্যাভারের পদ্ধতিটি সহজ / বুদ্ধিমান।

উপরের, attr()মূল styleস্ট্রিং / বৈশিষ্ট্যগুলি সংরক্ষণ করার জন্য পদ্ধতির সামান্য পরিবর্তন করা হয়েছে, এবং ফালকো একটি মন্তব্যে প্রস্তাবিত হিসাবে সংশোধিত হয়েছে :

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

Comments

আমি আপনার উত্তরোত্তর পদ্ধতির দিকে ঝুঁকছি, তবে এটির জন্য দুঃখজনক বিষয়টি হ'ল অসুস্থটি সম্ভবত পূর্ববর্তী সিএসটিেক্সটকে বিশ্লেষণ করে ফেলেছে কারণ আমি কেবল এটিকে বাতিল করতে পারি না

— এমকোরিয়াক

আহ, দুঃখিত, এটি কখনও পাওয়া যায় নি, কখনও কখনও ইংরাজী রসিকতা আমার বোধগম্যতার বাইরে চলে যায় ... :)

— সিনান

নেস্টেড কোটগুলির সাথে কী রয়েছে ('' প্রস্থ: 100px! গুরুত্বপূর্ণ '')? এটি আমার পক্ষে কাজ করে না, তবে আমি যখন অভ্যন্তরীণ উদ্ধৃতিগুলি সরিয়ে ফেলি তখন এটি কাজ করে। ধন্যবাদ!

— পিটার জারিক

শৈলী ফাঁকা থাকাকালীন ছোট ফিক্স: $ ('# এলিম') att ('শৈলী', ফাংশন (i, গুলি) {রিটার্ন (গুলি || '') + 'প্রস্থ: 100px! গুরুত্বপূর্ণ;'});

— ফলক

আপনার ফালফক্সের মতো আপনার @ ফালকো ফিক্স যুক্ত করা উচিত, যখন আপনার শেষ স্নিপেটটি 'undefinedwidth: 100px !important;'বর্তমান স্টাইলটি খালি থাকলে স্টাইল সেট করবে ।

— acdcjunior

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ফাংশনটি ব্যবহার করে অগ্রাধিকার দিয়ে সেট করার জন্য , এই নিবন্ধটি বলে যে আইই 9+ এবং অন্যান্য সমস্ত ব্রাউজারের জন্য সমর্থন রয়েছে। আমি IE 8 দিয়ে চেষ্টা করেছি এবং এটি ব্যর্থ হয়েছে, এজন্য আমি আমার কার্যাদিতে এটির জন্য সমর্থন তৈরি করেছি (উপরে দেখুন)। এটি সেটপ্রোপার্টি ব্যবহার করে অন্য সমস্ত ব্রাউজারে কাজ করবে তবে <আই 9 তে কাজ করার জন্য আমার কাস্টম কোডটির প্রয়োজন হবে।

Comments

আপনি অন্যান্য ব্রাউজারে এটি পরীক্ষা করেছেন?

— mkoryak

এছাড়াও jQuery.important প্লাগইন রয়েছে যা কয়েক বছর আগে প্রকাশিত হয়েছিল। আমি এটি কেবলমাত্র একটি ছোটখাটো ইস্যু নিয়ে প্রোডাকশনে ব্যবহার করছি (তাদের সমস্যাগুলির ট্যাবটি দেখুন

— কল্লিন

$ ('.সোমেক্লাস') .ইচ (ফাংশন () {this.style.setProperty ('সীমানা', 'কিছুই নয়', 'গুরুত্বপূর্ণ');}); stackoverflow.com/questions/11962962/… সরল, ক্লিনার এবং আরও দক্ষ।

এটির সাথে মোকাবিলা করার একমাত্র ভাল উপায় হ'ল সরাসরি শৈলীর ইনজেকশন নয় ক্লাসগুলি ব্যবহার করা।

— রিচার্ড

@ রিচার্ড, এটির মোকাবেলার একমাত্র ভাল উপায় হ'ল আপনার স্টাইলগুলিতে ব্যবহার না করা !important, কমপক্ষে যে জিনিসগুলির জন্য আপনি jQuery দিয়ে পরিবর্তন করতে চলেছেন ... যতক্ষণ না সেগুলি আপনার স্টাইল are যদি আপনার কোডটি এমন কোনও শিক্ষার্থীর কোডড পৃষ্ঠার মধ্যে চলে যা যারা !importantপ্রতিটি দ্বিতীয় স্টাইলে চড় মারার মাধ্যমে নির্দিষ্টকরণের নিয়ম সম্পর্কে তার অজ্ঞতার আশেপাশে কাজ করে, আপনি !importantsখুব শীঘ্রই বা পরে এগুলির একটিতে প্রথমে মাথা ঘুরিয়ে যাচ্ছেন ।

— সেপ্টেম্বর

Answer 3

আপনি সরাসরি এটি ব্যবহার করে প্রস্থ সেট করতে পারেন .width():

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

মন্তব্যের জন্য আপডেট করা হয়েছে: আপনার কাছে এই বিকল্পটিও রয়েছে তবে এটি উপাদানটির সমস্ত সিএসএস প্রতিস্থাপন করবে, সুতরাং নিশ্চিত হন না যে এটি আরও কার্যকর হবে:

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

Comments

ঠিক আছে, আমি উদাহরণ হিসাবে ব্যবহার করেছি, আমি কী যত্ন করি সেটি হ'ল গুরুত্বপূর্ণ।

— mkoryak

আমার পরিস্থিতি আরও ভালভাবে প্রতিফলিত করার জন্য আমি প্রশ্নটি সম্পাদনা করেছি .. মূলত আমার একটি বাহ্যিক! গুরুত্বপূর্ণ প্রস্থ রয়েছে যা খারাপ কিছুতে সেট করা আছে যা আমাকে অবশ্যই ইনলাইন ওভাররাইড করতে হবে। প্রস্থ () এই কারণে কাজ করে না

— mkoryak

@ এমকোরিয়াক - একমাত্র অন্যান্য অ-শ্রেণীর বিকল্পের সাথে আপডেট হয়েছে, এটি আপনার অবস্থার সাথে মানাবে কিনা তা নিশ্চিত নয় not

— নিক Craver

তবে এটি উপাদানটিতে সরাসরি প্রয়োগ করা অন্য কোনও স্টাইলকে ওভাররাইড করবে। stackoverflow.com/a/11723492/491044 কার্যকর করা সবচেয়ে সহজ।

— ট্র্যাগ্রাগ্লিয়া

$('#elem').css('cssText', $('#elem').css('cssText')+'width: 100px !important');পূর্ববর্তী মানটির সাথে একমত হয়ে ওভাররাইডগুলি প্রতিরোধ করুন

— আবেল ক্লেলেজো

Answer 4

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

দ্রষ্টব্য: ক্রোম ব্যবহার করা কোনও ত্রুটি যেমন:

এলেম [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')

— mcoenca

এছাড়াও সমস্যা ছিল .removeAttribute। এটি আই-একমাত্র পদ্ধতি বলে মনে হচ্ছে । @ এমকোয়েঙ্কা মন্তব্য ঠিক আছে; .removePropertyঠিকভাবে কাজ করে. এটি

— আইএস 9+

@ দিজান, খুব দেরিতে উত্তরের জন্য দুঃখিত, তবে এটি কাজ করা উচিত:elem.next().get(0).style...

— রেডক্লুভার

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

যদিও আইই 8 এবং এর চেয়ে কম ক্ষেত্রে এটি কাজ করে না।

Comments

এবং যেহেতু আমাদের এখনও IE8 সমর্থন করতে হবে (আমাদের মধ্যে কিছু দুর্ভাগ্য) - এটি ভাল নয়।

— mkoryak

Answer 7

তুমি এটি করতে পারো:

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

সম্পত্তির নাম হিসাবে "সিএসএসটেক্সট" ব্যবহার করা এবং আপনি সিএসএসে যা কিছু চান তার মান হিসাবে যুক্ত করুন।

Comments

এর নেতিবাচক cssText

— দিকটি হ'ল

যাইহোক, আপনি use ("# এলিম") ব্যবহার করতে পারেন। CSS ("cssText", "+ =; প্রস্থ: 100px! গুরুত্বপূর্ণ;");

— লেক্সা-বি

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()কিছু বৈশিষ্ট্য পুনরুদ্ধার করার সময় পদ্ধতিটি কখনও কখনও সম্পত্তি মানগুলিকে বিবেচনা করে নেয়, যা অসঙ্গত আচরণের কারণ হতে পারে। JQuery 1.6 হিসাবে, .prop()পদ্ধতিটি স্পষ্টভাবে সম্পত্তি মানগুলি পুনরুদ্ধার করার একটি উপায় সরবরাহ করে এবং .attr()বৈশিষ্ট্যগুলি পুনরুদ্ধার করে।

— মট্টি

জেনেরিক সমাধানের জন্য খুব ভাল ধারণা নয়। আপনি এটি ব্যবহার করে আপনার বিদ্যমান স্টাইলটিকে ওভাররাইড করতে পারেন।

— নীরভ জাভেরি

Answer 9

@ আরমকোচার্যানের উত্তরের জটিলতায় যাওয়ার দরকার নেই, বা গতিশীল কোনও স্টাইল ট্যাগ sertোকানোর প্রয়োজন নেই।

কেবল শৈলী ওভাররাইট করুন, তবে আপনাকে কোনও কিছুর বিশ্লেষণ করতে হবে না, আপনি কেন করবেন?

// 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(), কারণ এটি !importantChrome এ নিয়ম সরিয়ে দেবে না ।
ব্যবহার করতে পারবেন না element.style[property] = '', কারণ এটি ফায়ারফক্সে কেবল উট কেস গ্রহণ করে।}

আপনি সম্ভবত jQuery দিয়ে এই সংক্ষিপ্ততর করতে পারেন, তবে এই ভ্যানিলা ফাংশনটি আধুনিক ব্রাউজারগুলিতে, ইন্টারনেট এক্সপ্লোরার 8, এ চলবে etc.

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 ক্লাস যুক্ত করার পরিবর্তে সিডিএস প্রয়োগ করতে আইডিটি পরিবর্তন করবেন কেন?

— টেকপা

Answer 13

css()ফাংশনটি ব্যবহার না করে ফাংশনটি ব্যবহার করে দেখুন addClass():

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

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

Comments

ওপি লিখেছিল যে সম্পত্তিটির মূল্য গতিশীলভাবে গণনা করা হয়, সুতরাং আপনার উত্তর তার পক্ষে কার্যকর হয় না।

— সেবাস্তিয়ান জার্টনার

এই সমাধানটি আমার পক্ষে কাজ করেছিল। আমি মনে করি না যে আসল পোস্টার হিসাবে আমার সঠিক চাহিদা আছে তবে এটি যেখানে CSS () না করে সেখানে কাজ করে।

— leekei

এটি প্রকৃতপক্ষে কোনও সমস্যার পুরোপুরি যুক্তিসঙ্গত সমাধান ... কেবল এই সমস্যা নয়!

— mkoryak

Answer 14

আমার কাছ থেকে এই সমস্যার সহজতম এবং সর্বোত্তম সমাধান হ'ল .css () বা .attr () এর পরিবর্তে অ্যাডক্লাস () ব্যবহার করা।

উদাহরণ স্বরূপ:

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

এবং আপনার সিএসএস ফাইলে:

.importantClass {
    width: 100px !important;
}

Comments

যেহেতু জাভাস্ক্রিপ্টে প্রস্থটি গণনা করা হয়েছে এটি সমস্যার সমাধান করে না।

— ক্রিস

Answer 15

এফওয়াইআই, এটি কাজ করে না কারণ jQuery এটি সমর্থন করে না। ২০১২ ( # 11173 $ (এলেম) .css ("সম্পত্তি", "মান! গুরুত্বপূর্ণ") ব্যর্থ হয়েছে ) এ টিকিট দায়ের করা হয়েছিল যা শেষ পর্যন্ত ডাবটাকটিক্স হিসাবে বন্ধ হয়ে গিয়েছিল।

Answer 16

এই উত্তরগুলির বেশিরভাগ এখন পুরানো, আই 7 সমর্থন কোনও সমস্যা নয়।

আইই 11 + এবং সমস্ত আধুনিক ব্রাউজার সমর্থন করে এটি করার সর্বোত্তম উপায় হ'ল:

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

আমাদের আগের স্টাইলটি সরিয়ে নেওয়া দরকার need আমি এটি একটি নিয়মিত এক্সপ্রেশন ব্যবহার করে অপসারণ করি। রঙ পরিবর্তন করার জন্য এখানে একটি উদাহরণ দেওয়া হয়েছে:

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

Comments

যখন CSS টিেক্সট পদ্ধতিটি ঠিকঠাকভাবে কাজ করে তখন এতগুলি সমাধান কেন উপাদানটিতে স্টাইল ট্যাগ হ্যাক করে তা জানেন না ... উদাহরণস্বরূপ$selector.css('cssText','margin-bottom: 0 !important')

— ফ্রিবার্ট

Answer 18

শৈলীতে মাথায় রাখার বিকল্প উপায়:

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

এটি আপনার সমস্ত সিএসএস ফাইলের পরে স্টাইল সংযোজন করে তাই এটি অন্যান্য সিএসএস ফাইলের চেয়ে উচ্চ অগ্রাধিকার পাবে এবং প্রয়োগ করা হবে will

Answer 19

এটি দেখতে এর মতো হতে পারে:

ক্যাশে

var নোড = $ ('। নির্বাচক') [0];
অথবা
var নোড = ডকুমেন্ট.কোয়ারী নির্বাচনকারী ('। নির্বাচক');

সিএসএস সেট করুন

node.style.setProperty ('প্রস্থ', '100px', 'গুরুত্বপূর্ণ');

সিএসএস সরান

node.style.removeProperty ( 'প্রস্থ');
অথবা
node.style.width = '';

Answer 20

আমি মনে করি এটি ঠিকঠাক কাজ করে এবং এর আগে অন্য কোনও সিএসএস ওভাররাইট করতে পারে (এটি: ডোম উপাদান):

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

এটি আপনার পরিস্থিতির জন্য উপযুক্ত বা নাও হতে পারে তবে আপনি এই ধরণের পরিস্থিতিতে প্রচুর জন্য সিএসএস নির্বাচক ব্যবহার করতে পারেন।

উদাহরণস্বরূপ, আপনি .cssText এর তৃতীয় এবং 6th ষ্ঠ উদাহরণের চেয়ে আলাদা প্রস্থের লিখতে চেয়েছিলেন:

.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

এটি তৃতীয় এবং 6th ষ্ঠ উদাহরণগুলির সাথে মেলে না.cssText । :nth-of-type()আপনি যা ভাবেন তা করে না। ব্যাখ্যা জন্য এখানে দেখুন ।

— BoltClock

যথেষ্ট ফর্সা। আমি লিঙ্কটি পড়েছি, তবে আমি নিশ্চিত নই যে আমি আপনার বক্তব্যটি বুঝতে পেরেছি। এখানে কাজ করার মতো একটি মিশ্রণ এটি

— টিম কাটিং

আপনার কৌতুকগুলিতে, আপনি বিভিন্ন liউপাদানের সাথে কাজ করছেন dealing এগুলি সমস্ত একই উপাদান ধরণের li, যা নির্বাচকদের সাথে সম্পর্কিত। আপনি যদি একই প্যারেন্টে বিভিন্ন উপাদান মিশ্রিত করেন তবে আলাদা :nth-of-type()আচরণ করবেন, বিশেষত একবার মিশ্রণে কোনও শ্রেণি নির্বাচক যুক্ত করার পরে।

— BoltClock

Answer 25

আমি ধরে নেব আপনি যোগ না করে চেষ্টা করেছেন !important?

ইনলাইন সিএসএস (এটি কীভাবে জাভাস্ক্রিপ্ট স্টাইলিং যুক্ত করে) স্টাইলশিট সিএসএসকে ওভাররাইড করে। স্টাইলশীট সিএসএস বিধি থাকা সত্ত্বেও আমি বিষয়টি নিশ্চিত !important।

আরেকটি প্রশ্ন (সম্ভবত একটি মূ ?় প্রশ্ন তবে অবশ্যই জিজ্ঞাসা করা উচিত)): আপনি যে উপাদানটির উপর কাজ করার চেষ্টা করছেন সেটি কি display:block;বা display:inline-block;?

সিএসএসে আপনার দক্ষতা না জানা ... ইনলাইন উপাদানগুলি সর্বদা আপনার প্রত্যাশা মতো আচরণ করে না।

Comments

সিএসএসের বিধিগুলি রয়েছে যেগুলি গুরুত্বপূর্ণ! সমস্ত কিছু ওভাররাইড করে, তারা যেখানেই থাকুক না কেন, কেবলমাত্র ব্যতিক্রমগুলিই সেই সাথে গুরুত্বপূর্ণ যে ইনলাইন শৈলীগুলি গুরুত্বপূর্ণ! এর সাথে স্টাইলশিট শৈলীগুলিকে ওভাররাইড করবে! আমার এই সমস্যাটি হচ্ছে। এখানে স্টাইলশিট নিয়ম রয়েছে! গুরুত্বপূর্ণ যে আমি ওভাররাইড করতে চাই। আরও কী, আমার যে মান সরবরাহ করতে হবে তা অবশ্যই জেএসের মাধ্যমে গণনা করা উচিত, তাই আমি স্টাইলশীটটি কেবল পরিবর্তন করতে পারি না।

— mkoryak

Answer 26

আমরা !importantজাভাস্ক্রিপ্ট ব্যবহার করে কোনও ডিওএম উপাদান যুক্ত করতে সেটপ্রোপার্টি বা সিএসএসেক্সট ব্যবহার করতে পারি ।

উদাহরণ 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;}

শেষ পদক্ষেপ: অ্যাডক্লাস পদ্ধতিটি ব্যবহার করে এই শ্রেণিটি প্রয়োগ করুন:

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

সমস্যা সমাধান.

Comments

সেরা উত্তর, আমার মতে। সবচেয়ে সুবিধাজনক।

— সিয়াহ

ধন্যবাদ @ সিয়াহ সিএসএস পিপিএল লোড দ্বারা পরিচিত তবে এটি খুব কম লোকই বুঝতে পেরেছিল এবং এটি দুঃখজনক এবং কিছু প্রোগ্রামারকে এটি ঘৃণা করতে

— বাধ্য করে

তবে আপনি যদি জেএসের সাথে সিএসএস মান উত্পন্ন করতে চান তবে জেএসে বর্ণিত রঙ মানটি পূর্বাভাস দিন। অন্যথায় এটি দুর্দান্ত।

— কার্ল পাপওয়ার্থ

আপনি জেএস-এ কোনও রঙ নির্ধারণ করতে চান কেন?

— জোয়েলবনেটআর

Answer 29

এই সবচেয়ে নিরাপদ কার্যসংক্রান্ত একটি বর্গ যোগ করার জন্য এবং তারপর CSS এ জাদু কি :-) হয় addClass()এবং removeClass()কাজ করা উচিত।

Answer 30

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

একটি বিকল্প পদ্ধতি গতিশীলভাবে জাভাস্ক্রিপ্টে CSS ক্লাস তৈরি এবং আপডেট করছে ating এটি করার জন্য, আমরা শৈলী উপাদান ব্যবহার করতে পারি এবং শৈলীর উপাদানগুলির জন্য আইডি নিয়োগ করতে হবে যাতে আমরা সিএসএস শ্রেণি আপডেট করতে পারি

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)