ওভাররাইডিং! গুরুত্বপূর্ণ স্টাইল

Question

শিরোনাম এটির পরিমাণ যথেষ্ট ms

বাহ্যিক স্টাইল শীটে নিম্নলিখিত কোড রয়েছে:

td.EvenRow a {
  display: none !important;
}

আমি ব্যবহার করে চেষ্টা করেছি:

element.style.display = "inline";

এবং

element.style.display = "inline !important";

কিন্তু কোনটিই কাজ করে না। জাভাস্ক্রিপ্ট ব্যবহার করে কী কোনও গুরুত্বপূর্ণ স্টাইলকে ওভাররাইড করা সম্ভব?

এটি গ্রিসমোনকি এক্সটেনশনের জন্য, যদি এটি কোনও পার্থক্য করে।

Comments

যাও stackoverflow.com/a/463134/632951

— Pacerier

@ পেসারিয়ার টাইম সেভার!

— এডুয়ার্ড

Answer 1

আমি বিশ্বাস করি এটি করার একমাত্র উপায় '! গুরুত্বপূর্ণ' প্রত্যয় সহ নতুন সিএসএস ঘোষণা হিসাবে শৈলী যুক্ত করতে। এটি করার সবচেয়ে সহজ উপায় হ'ল নথির শিরোনামে একটি নতুন <স্টাইল> উপাদান যুক্ত করা:

function addNewStyle(newStyle) {
    var styleElement = document.getElementById('styles_js');
    if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.id = 'styles_js';
        document.getElementsByTagName('head')[0].appendChild(styleElement);
    }
    styleElement.appendChild(document.createTextNode(newStyle));
}

addNewStyle('td.EvenRow a {display:inline !important;}')

উপরোক্ত পদ্ধতির সাথে যুক্ত বিধিগুলি (যদি আপনি! গুরুত্বপূর্ণ প্রত্যয় ব্যবহার করেন) পূর্ববর্তী সেট স্টাইলিংকে ওভাররাইড করে। যদি আপনি প্রত্যয়টি ব্যবহার না করে থাকেন তবে ' স্পষ্টতা ' জাতীয় ধারণাটি বিবেচনায় নেওয়ার বিষয়টি নিশ্চিত করুন ।

Comments

এটি ওয়ান-লাইনার দ্বারা প্রতিস্থাপিত হতে পারে। নীচে দেখুন: স্ট্যাকওভারফ্লো.com

— প্রশ্নগুলি

আপনি নির্বাচককে কীভাবে খুঁজে পাবেন যা প্রকৃতপক্ষে শৈলীটি ট্রিগার করে? আমি মনে করি এটির জন্য সমস্ত স্টাইলশিট বিশ্লেষণ করা দরকার, এটি একটি অত্যন্ত শক্ত কাজ।

— ব্যবহারকারী 123444555621

Answer 2

এটি করতে আপনি বেশ কয়েকটি সাধারণ ওয়ান-লাইনার ব্যবহার করতে পারেন।

1) উপাদানটিতে একটি "স্টাইল" বৈশিষ্ট্য নির্ধারণ করুন:

element.setAttribute('style', 'display:inline !important');

বা ...

2) বস্তুর cssTextসম্পত্তি পরিবর্তন করুন style:

element.style.cssText = 'display:inline !important';

হয় চাকরি করবে।

===

বিটিডাব্লু - আপনি যদি !importantউপাদানগুলিতে নিয়মগুলি পরিচালনা করার জন্য একটি দরকারী সরঞ্জাম চান তবে আমি একটি "জরুরী" নামে একটি jQuery প্লাগইন লিখেছি: http://github.com

Comments

আমার মনে হয় cssText ব্যবহার করা সহজ তবে একটি styleট্যাগ যুক্ত করা।

— গাস

@ গুস - আমি যে প্রথম উদাহরণটি দিয়েছি তা কোনও গুনের জন্য style, কোনও ট্যাগ / উপাদান নয়।

— প্রেমাসাগর

অন্যান্য বৈশিষ্ট্যগুলিকে ওভাররাইড করা রোধ করতে আপনি লোকটি ব্যবহার করতে চানelement.style.cssText += ';display:inline !important;';

— ব্যবহারকারী 123444555621

এটি নির্বাচিতটির চেয়ে আরও ভাল উত্তর, অবশ্যই এটি আরও উচ্চতর হবে +

— নাথান সি ট্রেশ

@ ব্যবহারকারী 123444555621, প্রেমাসাগর। পাশাপাশি ভালো বিকল্প ব্যবহার হতে পারে: element.style.setProperty।

— পেসারিয়ার

Answer 3

element.stylesetPropertyতৃতীয় প্যারামিটার হিসাবে অগ্রাধিকার নিতে পারে এমন একটি পদ্ধতি রয়েছে :

element.style.setProperty("display", "inline", "important")

এটি পুরানো আইইগুলিতে কাজ করেনি তবে বর্তমান ব্রাউজারগুলিতে এটি ঠিক হওয়া উচিত।

Comments

আইই 9 9 এমএসডিএন.মাইক্রোসফটকম /en-us/library/ie/ff975226%28v=vs.85%29.aspx

— সালমান ভন আব্বাস

সর্বোত্তম সমাধান, যেহেতু এটি পুরো স্টাইলের বৈশিষ্ট্যটিকে ওভাররাইড করে না এবং ডাব্লু 3 সি এটির কাজটি বোঝানোর উপায়।

— stfn

এর নেতিবাচক দিকটি হ'ল আমি উটের কেসে যেমন সম্পত্তির নাম ব্যবহার করতে পারি নাboxShadow

— পাভান

@ পাভান পরিবর্তে হাইফেনেটেড ফর্মটি ব্যবহার করা সহজ, অথবা আপনি যদি স্বয়ংক্রিয়ভাবে রূপান্তর করতে চান তবে কেবল একটি ফাংশন লিখুন।

— nyuszika7h

Answer 4

@ প্রেমাসাগরের দুর্দান্ত উত্তরে বিল্ডিং; আপনি যদি অন্য সমস্ত ইনলাইন শৈলীগুলি এটি ব্যবহার করতে না চান তবে

//accepts the hyphenated versions (i.e. not 'cssFloat')
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] = ''কারণ এটি কেবল ফায়ারফক্সে উট কেস গ্রহণ করে।}

Comments

পাশাপাশি ভালো বিকল্প ব্যবহার হতে পারে: element.style.setProperty।

— পেসারিয়ার

Answer 5

আমি সবেমাত্র আরও ভাল পদ্ধতি আবিষ্কার করেছি: আপনার নির্বাচকদের সাথে পৃষ্ঠা সিএসএসের চেয়ে আরও সুনির্দিষ্ট হওয়ার চেষ্টা করুন। আমাকে কেবল আজ এটি করতে হয়েছিল, এবং এটি একটি কবজির মতো কাজ করে! ডাব্লু 3 সি সাইটে আরও তথ্য: http://www.w3.org/TR/CSS2/cascade.html# বিশিষ্টতা

Comments

ভাল, অন্তর্দৃষ্টিপূর্ণ উত্তর পোস্ট করার জন্য ধন্যবাদ। আপনি যদি মূল প্রশ্নের কোড ব্যবহার করে একটি উদাহরণ দেওয়ার জন্য সময় নেন তবে এটি আরও বেশি সহায়ক হবে।

— লাইফ উইকল্যান্ড

Answer 6

আপনি যদি ডিওএম এলিমেন্ট শৈলীর বৈশিষ্ট্যে একক স্টাইল আপডেট / যুক্ত করতে চান তবে আপনি এই ফাংশনটি ব্যবহার করতে পারেন:

function setCssTextStyle(el, style, value) {
  var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" +
      style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")),
    idx;
  if (result) {
    idx = result.index + result[0].indexOf(result[1]);
    el.style.cssText = el.style.cssText.substring(0, idx) +
      style + ": " + value + ";" +
      el.style.cssText.substring(idx + result[1].length);
  } else {
    el.style.cssText += " " + style + ": " + value + ";";
  }
}

style.cssText সমস্ত বড় ব্রাউজারের জন্য সমর্থিত ।

কেস উদাহরণ ব্যবহার করুন:

var elem = document.getElementById("elementId");
setCssTextStyle(elem, "margin-top", "10px !important");

এখানে ডেমো লিঙ্ক

Comments

এই উত্তরটি কোন অতিরিক্ত তথ্য বা উন্নতি সরবরাহ করে?

— পোগরিন্ডিস

এই ফাংশনটি সংক্ষিপ্ত, সহজ এবং বুঝতে সহজ। আপনি গুরুত্বপূর্ণ বিকল্প যুক্ত করতে পারেন। এটি সমস্ত উপাদান শৈলী অপসারণ করে না। এটি অলাইট্রাইটিং বা উপাদান স্টাইলগুলিতে একক শৈলী যুক্ত করে ti আপনার কোনও জেএস ফ্রেমওয়ার্ক দরকার নেই। এবং সবচেয়ে গুরুত্বপূর্ণ বিষয়টি হ'ল এই ফাংশনটি প্রতিটি ব্রাউজারে কাজ করছে।

— মারেক স্ক্রিজিনিয়ার্জ

Answer 7

যদি আপনি যা করছেন সমস্ত পৃষ্ঠায় সিএসএস যুক্ত করা হয়, তবে আমি আপনাকে পরামর্শ দিচ্ছি যে আপনি স্টাইলিশ অ্যাডোন ব্যবহার করুন এবং একটি ব্যবহারকারী স্ক্রিপ্টের পরিবর্তে একটি ব্যবহারকারী শৈলী লিখুন, কারণ একটি ব্যবহারকারী শৈলী আরও দক্ষ এবং উপযুক্ত।

কীভাবে একটি ব্যবহারকারী শৈলী তৈরি করতে হয় সে সম্পর্কিত তথ্য সহ এই পৃষ্ঠাটি দেখুন

Comments

সিএসএস পরিবর্তন করা আমার গ্রাম এক্সটেনশন যা করে তার কেবল একটি অংশ

— এনরিকো

Answer 8

https://developer.mozilla.org/en-US/docs/Web/CSS/initial

CSS3 এ প্রাথমিক সম্পত্তি ব্যবহার করুন

 <p style="color:red!important"> 
    this text is red 
       <em style="color:initial"> 
          this text is in the initial color (e.g. black)
       </em>
    this is red again
 </p>

Comments

প্রাথমিক রিসেট গুরুত্বপূর্ণ নয়। আপনি পি এর রঙটি সেট করছেন না তবে তাদের রঙ। প্রকৃতপক্ষে, রঙ পরিবর্তন করুন: প্রাথমিক থেকে রঙ: সবুজ এবং এটি খুব কার্যকর হবে।

— পেসারিয়ার

Answer 9

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

জাভাস্ক্রিপ্টে সিএসএস শ্রেণিকে ওভাররাইড করার জন্য একটি বিকল্প শৈলীর উপাদানগুলির জন্য একটি আইডি ব্যবহার করছে যাতে আমরা সিএসএস ক্লাস আপডেট করতে পারি

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)

Answer 10

ইনজেকশন শৈলীর চেয়ে আপনি জাভা স্ক্রিপ্টের মাধ্যমে কোনও শ্রেণি (উদাহরণস্বরূপ: 'শো') ইনজেক্ট করলে এটি কাজ করবে। তবে এখানে আপনার নীচের মত সিএসএস দরকার। যোগ করা শ্রেণীর CSS বিধিটি আপনার মূল নিয়মের নীচে হওয়া উচিত।

td.EvenRow a{
  display: none !important;
}

td.EvenRow a.show{
  display: block !important;
}

Answer 11

সিএসএস থেকে কোনও সম্পত্তি মান সরিয়ে নেওয়ার আমাদের আর একটি সম্ভাবনা রয়েছে।

জেএস-এ প্রতিস্থাপন পদ্ধতিটি ব্যবহার করার মতো। তবে আপনাকে শৈলীর আইডিটি সঠিকভাবে জানতে হবে, বা এটি সনাক্ত করতে আপনি লুপের জন্য লিখতে পারেন (পৃষ্ঠায় শৈলীর গণনা করুন, তারপরে সেইগুলির কোনওটি 'অন্তর্ভুক্ত' বা 'ম্যাচ' করে দেখুন কিনা তা পরীক্ষা করে দেখতে পারেন !importantএবং আপনি গণনা করতে পারেন এছাড়াও - এগুলিতে কতটুকু রয়েছে, বা কেবল একটি বিশ্বব্যাপী লিখুন [regexp: / str / gi] প্রতিস্থাপন পদ্ধতি)

খনিটি খুব সহজ, তবে আমি একটি জেএসবিন সংযুক্ত করি, উদাহরণস্বরূপ:

https://jsbin.com/geqodeg/edit?html,css,js,output

প্রথমে আমি !importantসিএসএসে হলুদ রঙের জন্য বডি ব্যাকগ্রাউন্ড সেট করেছিলাম , তারপরে আমি ডার্কপিংকের জন্য জেএস দ্বারা ওভাররাইড করেছি।

Answer 12

নীচে jquery ব্যবহার করে শৈলী বৈশিষ্ট্যের জন্য গুরুত্বপূর্ণ পরামিতি সেট করতে কোডের স্নিপেট রয়েছে।

$.fn.setFixedStyle = function(styles){
    var s = $(this).attr("style");
    s = "{"+s.replace(/;/g,",").replace(/'|"/g,"");
    s = s.substring(0,s.length-1)+"}";
    s = s.replace(/,/g,"\",\"").replace(/{/g,"{\"").replace(/}/g,"\"}").replace(/:/g,"\":\"");
    var stOb = JSON.parse(s),st;
    if(!styles){
     $.each(stOb,function(k,v){
      stOb[k] +=" !important";
     });
    }
    else{
     $.each(styles,function(k,v){
      if(v.length>0){
        stOb[k] = v+" !important";
      }else{
        stOb[k] += " !important";  
      }
     });
    }
    var ns = JSON.stringify(stOb);
    $(this).attr("style",ns.replace(/"|{|}/g,"").replace(/,/g,";"));
};

ব্যবহার বেশ সহজ J আপনি গুরুত্বপূর্ণ হিসাবে নির্ধারণ করতে চান এমন সমস্ত বৈশিষ্ট্যযুক্ত কোনও বস্তু পাস করুন।

$("#i1").setFixedStyle({"width":"50px","height":""});

দুটি অতিরিক্ত বিকল্প আছে।

1. ইতিমধ্যে শৈলী বৈশিষ্ট্য পাস খালি স্ট্রিং উপস্থিত গুরুত্বপূর্ণ পরামিতি যোগ করতে।

2. উপস্থিত সমস্ত বৈশিষ্ট্যের জন্য গুরুত্বপূর্ণ পরম যুক্ত করতে কিছুতেই পাস করবেন না। এটি সমস্ত বৈশিষ্ট্যকে গুরুত্বপূর্ণ হিসাবে সেট করবে।

এখানে এটি লাইভ ইন অ্যাকশন। http://codepen.io/agaase/pen/nkvjr