दिलचस्प पोस्ट
Gulps gulp.watch नई या हटाई गई फ़ाइलों के लिए ट्रिगर नहीं? आप PostgreSQL में स्क्रिप्ट चर का कैसे उपयोग करते हैं? JSON डेटा के साथ पोस्ट के माध्यम से फ़ाइल डाउनलोड करने के लिए जावास्क्रिप्ट / jQuery PHP में पाठ से यूआरएल निकालें अजाक्स फ़ाइल डाउनलोड करें Jquery, PHP फॉर्म स्प्रिंग एमवीसी 3 में जमा करें – स्पष्टीकरण एक बाहरी फाइल सिस्टम या डेटाबेस से फेसलेट टेम्पलेट / फ़ाइलें प्राप्त करना एनजी 2-बूटस्ट्रैप बाल घटक के रूप में मॉडल / छुपाएं सीओएफएफ में रूपांतरण के दौरान विफलता: अमान्य या भ्रष्ट फ़ाइल रेल 4 – मजबूत पैरामीटर – नेस्टेड ऑब्जेक्ट्स जावास्क्रिप्ट सिंटाक्स एर्रेस को जेनसन के साथ जीना टेम्पलेट में उठाया गया है जावास्क्रिप्ट का उपयोग करते हुए मैं पाठ इनपुट फ़ील्ड का मान कैसे प्राप्त करूं? कैसे बाइट सरणी को स्ट्रिंग में परिवर्तित करें JTree फाइल नाम कैसे प्रदर्शित करता है? एचटीएमएल / सीएसएस के साथ मैं बराबर ऊँचाई div (किनारे की तरफ) कैसे प्राप्त करूं?

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

शीर्षक बहुत ज्यादा यह बताता है

बाहरी शैली पत्रक में निम्न कोड है:

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

मैंने प्रयोग करने की कोशिश की है:

 element.style.display = "inline"; 

तथा

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

लेकिन न ही काम करता है जावास्क्रिप्ट का उपयोग कर एक महत्वपूर्ण शैली को ओवरराइड करना संभव है?

यह एक ग्रेसिंबनी एक्सटेंशन के लिए है, अगर यह एक अंतर बनाता है

वेब के समाधान से एकत्रित समाधान "ओवरराइडिंग! महत्वपूर्ण शैली"

मुझे विश्वास है कि इसे '! महत्वपूर्ण' प्रत्यय के साथ एक नया सीएसएस घोषणा के रूप में शैली जोड़ने के लिए ऐसा करने का एकमात्र तरीका है ऐसा करने का सबसे आसान तरीका दस्तावेज़ के प्रमुख को एक नया <style> तत्व जोड़ना है:

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

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

ऐसा करने के लिए आप एक सरल दो-लाइनर्स इस्तेमाल कर सकते हैं।

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

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

या …

2) style ऑब्जेक्ट की cssText संपत्ति को संशोधित करें:

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

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

===

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

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

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

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

प्रीमासागर के उत्कृष्ट उत्तर पर बिल्डिंग; अगर आप अन्य सभी इनलाइन शैलियों को हटाने के लिए नहीं चाहते हैं तो इसका उपयोग करें

 //accepts the hyphenated versions (ie 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 नियमों को दूर नहीं करेगा !important
element.style[property] = '' उपयोग नहीं कर सकता क्योंकि यह केवल फ़ायदा में उम्ले कैस को स्वीकार करता है।

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

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

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

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

सीएसएस 3 में प्रारंभिक संपत्ति का उपयोग करें

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

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) 

यदि आप 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"); 

यहां डेमो के लिए लिंक है

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. सभी विशेषताओं के लिए महत्वपूर्ण परम जोड़ने के लिए कुछ भी नहीं पारित करते हैं। यह सभी विशेषताओं को महत्वपूर्ण के रूप में सेट करेगा

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