ओवरराइडिंग! महत्वपूर्ण शैली

Question

शीर्षक बहुत अधिक यह रकम।

बाहरी स्टाइल शीट में निम्नलिखित कोड होते हैं:

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

इसे वन-लाइनर द्वारा प्रतिस्थापित किया जा सकता है। नीचे देखें: stackoverflow.com/questions/462537/…

— प्रेमसागर

आप कैसे चयनकर्ता खोजने जा रहे हैं जो वास्तव में शैली को ट्रिगर करता है? मुझे लगता है कि इसके लिए सभी स्टाइलशीट को पार्स करने की आवश्यकता है, जो कि काफी कठिन काम है।

— user123444555621 12

Answer 2

सरल वन-लाइनर्स के एक जोड़े हैं जिन्हें आप ऐसा करने के लिए उपयोग कर सकते हैं।

1) तत्व पर एक "शैली" विशेषता सेट करें :

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

या ...

2) वस्तु की cssTextसंपत्ति को संशोधित करें style:

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

या तो नौकरी करेंगे।

===

BTW - यदि आप !importantतत्वों में नियमों में हेरफेर करने के लिए एक उपयोगी उपकरण चाहते हैं, तो मैंने "महत्वपूर्ण" नामक एक jQuery प्लगइन लिखा है: http://github.com/premasagar/important

Comments

मुझे लगता है कि cssText का उपयोग करना सरल है फिर एक styleटैग जोड़ना ।

— Guss

@Guss - मैंने जो पहला उदाहरण दिया वह एक styleविशेषता के लिए है, एक टैग / तत्व के लिए नहीं।

— प्रेमसागर

अन्य गुणों को ओवरराइड करने से रोकने के लिए, आप आदमी का उपयोग करना चाहते हैंelement.style.cssText += ';display:inline !important;';

— user123444555621 12

यह चयनित के मुकाबले एक बेहतर उत्तर है, निश्चित रूप से, +1 इसे उच्चतर प्राप्त करने के लिए।

— नाथन सी। ट्रेश

@ user123444555621, प्रेमसागर। साथ ही बेहतर विकल्प का उपयोग कर सकते हैं element.style.setProperty:।

— 5

Answer 3

element.styleएक setPropertyविधि है जो प्राथमिकता को तीसरे पैरामीटर के रूप में ले सकती है:

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

यह पुराने IE में काम नहीं करता था, लेकिन यह वर्तमान ब्राउज़रों में ठीक होना चाहिए।

Comments

IE 9 msdn.microsoft.com/en-us/library/ie/ff975226%28v=vs.85%29.aspx

— सलमान वॉन अब्बास

सबसे अच्छा समाधान, क्योंकि यह पूरी शैली की विशेषता को ओवरराइड नहीं करता है और जिस तरह से W3C का मतलब है कि यह काम करता है।

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

Comments

साथ ही बेहतर विकल्प का उपयोग कर सकते हैं element.style.setProperty:।

— पचेरियर

Answer 5

बेहतर तरीका जो मैंने अभी खोजा है: अपने चयनकर्ताओं के साथ पृष्ठ सीएसएस की तुलना में अधिक विशिष्ट होने का प्रयास करें। मुझे बस आज यह करना था, और यह एक आकर्षण की तरह काम करता है! W3C साइट पर अधिक जानकारी: http://www.w3.org/TR/CSS2/cascade.html#specificity

Comments

Nuck, व्यावहारिक जवाब पोस्ट करने के लिए धन्यवाद। यदि आप मूल प्रश्न के कोड का उपयोग करके एक उदाहरण प्रदान करने में समय लेते हैं तो यह और भी अधिक उपयोगी होगा।

— लीफ विकलैंड

Answer 6

यदि आप DOM एलीमेंट शैली विशेषता में एकल शैली को अद्यतन / जोड़ना चाहते हैं, तो आप इस फ़ंक्शन का उपयोग कर सकते हैं:

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

यह उत्तर क्या अतिरिक्त जानकारी या सुधार प्रदान करता है?

— पोग्रिंडिस

यह फ़ंक्शन छोटा, सरल और समझने में आसान है। आप महत्वपूर्ण विकल्प जोड़ सकते हैं। यह सभी तत्व शैलियों को नहीं हटाता है। यह तत्व शैलियों में एक शैली को अधिलेखित करने या जोड़ने की कोशिश करता है। आपको किसी भी जेएस फ्रेमवर्क की आवश्यकता नहीं है। और सबसे महत्वपूर्ण बात यह है कि यह फ़ंक्शन हर ब्राउज़र में काम कर रहा है।

— मारेक स्कर्ज़िनियारज़

Answer 7

यदि आप सभी कर रहे हैं पृष्ठ पर सीएसएस जोड़ रहा है, तो मैं आपको स्टाइलिश ऐडऑन का उपयोग करने का सुझाव दूंगा, और उपयोगकर्ता स्क्रिप्ट के बजाय एक उपयोगकर्ता शैली लिखूंगा, क्योंकि एक उपयोगकर्ता शैली अधिक कुशल और उपयुक्त है।

देखें कैसे एक उपयोगकर्ता शैली बनाने के लिए के बारे में जानकारी के साथ इस पेज

Comments

Css को संशोधित करना मेरे gm एक्सटेंशन का केवल एक हिस्सा है

— Enrico

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

इंजेक्शन शैली के बजाय, यदि आप जावा स्क्रिप्ट के माध्यम से एक वर्ग (उदाहरण के लिए: 'शो') इंजेक्ट करते हैं, तो यह काम करेगा। लेकिन यहां आपको नीचे की तरह सीएसएस की जरूरत है। जोड़ा गया वर्ग सीएसएस नियम आपके मूल नियम से नीचे होना चाहिए।

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

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

Answer 11

सीएसएस से एक संपत्ति मूल्य को हटाने के लिए हमारे पास एक और संभावना है।

जेएस में प्रतिस्थापित विधि का उपयोग कर की तरह। लेकिन आपको स्टाइल की आईडी का ठीक-ठीक पता होना चाहिए, या आप उस लूप का पता लगाने के लिए एक लूप लिख सकते हैं (पेज पर शैलियों को गिन सकते हैं, फिर जांच कर सकते हैं कि उनमें से कोई ' !importantवैल्यू ' या 'मैच' शामिल है या नहीं । यह भी - उनमें कितना सम्‍मिलित है, या केवल एक वैश्विक लिखें [regexp: / str / gi] रिप्‍लेसिंग विधि)

मेरा बहुत सरल है, लेकिन मैं उदाहरण के लिए, एक jsBin संलग्न करता हूं:

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

पहले मैंने पीले रंग के लिए सीएसएस में बॉडी बैकग्राउंड सेट किया !important, फिर मैंने डार्कपिंक के लिए JS को ओवरराइड किया।

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

उपयोग बहुत आसान है। बस एक ऑब्जेक्ट पास करें जिसमें वे सभी विशेषताएँ हैं जिन्हें आप महत्वपूर्ण के रूप में सेट करना चाहते हैं।

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

दो अतिरिक्त विकल्प हैं।

1. केवल महत्वपूर्ण पैरामीटर जोड़ने के लिए पहले से ही मौजूद शैली विशेषता खाली स्ट्रिंग पास करें।

सभी विशेषताओं के लिए 2.To जोड़ने के लिए कुछ भी मौजूद नहीं है। यह सभी विशेषताओं को महत्वपूर्ण के रूप में सेट करेगा।

यहाँ यह कार्रवाई में लाइव है। http://codepen.io/agaase/pen/nkvjr