क्या मैं सीएसएस को हटाने/अस्वीकार करने के लिए jquery का उपयोग कर सकता हूं! महत्वपूर्ण नियम?

Question

यदि कोई सीएसएस नियम है जो !important का उपयोग करता है, तो !important नियम को निकालने का कोई तरीका है ताकि मैं जेएस या jQuery के साथ और डाउनस्ट्रीम शैली में बदलाव कर सकूं?

theirs.css

div.stubborn { display: none !important; } 

mine.js

$('.stubborn').fadeIn(); // won't work because of !important flag 

दुर्भाग्य से, मैं शैली !important नियम लागू करने पर नियंत्रण तो मैं एक काम के आसपास की जरूरत नहीं है।

Answer 1

दुर्भाग्य से, आप शामिल theirs.css नीचे इनलाइन/आंतरिक शैली के रूप में !important का उपयोग किए बिना !important ओवरराइड नहीं कर सकते।

आप !important शैली को परिभाषित कर सकते हैं और इसे .stubborn पर जोड़ सकते हैं और फिर अस्पष्टता समायोजित कर सकते हैं ..नीचे देखें,

सीएसएस:

div.hidden_block_el { 
    display: block !important; 
    opacity: 0; 
} 

जे एस:

$('.stubborn') 
    .addClass('hidden_block_el') 
    .animate({opacity: 1}); 

डेमो:http://jsfiddle.net/jjWJT/1/

वैकल्पिक दृष्टिकोण (इनलाइन),

$('.stubborn') 
    .attr('style', 'display: block !important; opacity: 0;') 
    .animate({opacity: 1}); 

डेमो:http://jsfiddle.net/jjWJT/

Answer 2

आप के साथ एक नई सीएसएस शैली जोड़ सकते हैं महत्वपूर्ण यह करने के लिए कहा कि मूल शैली

यह जावास्क्रिप्ट में एक और उत्तर से है को पार कर जाएगी:

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

इस जवाब here

है

यह भी मेरा मानना ​​है कि आप इस

 .css({ 'display' : 'block !important' }); 

जैसे स्टाइल जोड़ सकते हैं JQuery में

Answer 3

आपको फीका लागू करने के लिए एक नई कक्षा बनाने की आवश्यकता है।

सीएसएस:

div.stubborn { display: none !important; } 
div.stubborn.fade-ready { display: block !important; opacity: 0; } 

जे एस:

$('.stubborn').addClass('fade-ready').animate({opacity: 1}); //to show 
$('.stubborn').fadeOut(function() {$(this).removeClass('fade-ready');}); //to hide 

डेमो HERE

Answer 4

बस एक style="" टैग किसी भी चित्र को इस मुद्दे के साथ जोड़ने के लिए, उम्मीद है कि वे सब उन्हें वर्ग को परिभाषित है कि यह ऐसा करने के लिए आसान है किसी प्रकार का है।

$('div.stubborn').attr('style', 'display: inline !important;');​ 

jsFiddle DEMO

Answer 5

मैं कई तरीकों की कोशिश की है, लेकिन सबसे अच्छा परिणाम रहा एक अलग वर्ग में सीएसएस शैली जोड़कर प्राप्त किया है, तो jQuery के साथ निकाल सकते हैं (महत्वपूर्ण!):

सीएसएस :

.important-css-here { display: block !important;} 

jQuery में:

$("#selector").addClass("important-css-here"); 

,210 तो

, जब मैं जरूरत:

$("#selector").removeClass("important-css-here"); 

एक आकर्षण ;-)