javascript - मैं.css() फ़ंक्शन के साथ जोड़ा गया शैली कैसे हटा सकता हूं?




jquery (11)

JQuery का उपयोग कर सीएसएस संपत्ति को हटाने के कई तरीके हैं:

1. सीएसएस प्रॉपर्टी को अपने डिफ़ॉल्ट (प्रारंभिक) मान पर सेट करना

.css("background-color", "transparent")

एमडीएन में सीएसएस संपत्ति के लिए प्रारंभिक मूल्य देखें। यहां डिफ़ॉल्ट मान transparent । आप अपने माता-पिता से विशेषता विरासत में लाने के लिए कई सीएसएस गुणों के लिए inherit भी उपयोग कर सकते हैं। CSS3 / CSS4 में, आप initial , revert या unset का भी उपयोग कर सकते हैं लेकिन इन कीवर्ड में सीमित ब्राउज़र समर्थन हो सकता है।

2. सीएसएस संपत्ति को हटा रहा है

एक खाली स्ट्रिंग सीएसएस संपत्ति को हटा देती है, यानी

.css("background-color","")

लेकिन सावधान रहें, जैसा कि jQuery .css () प्रलेखन में निर्दिष्ट है, यह संपत्ति को हटा देता है लेकिन इसमें पृष्ठभूमि सहित कुछ सीएसएस शॉर्टेंड गुणों के लिए IE8 के साथ संगत समस्याएं हैं।

स्टाइल प्रॉपर्टी के मान को रिक्त स्ट्रिंग पर सेट करना - उदाहरण के लिए $ ('# mydiv')। Css ('color', '') - उस प्रॉपर्टी को किसी तत्व से हटा देता है यदि यह पहले से ही सीधे लागू हो चुका है, चाहे HTML शैली में विशेषता, jQuery की .css () विधि के माध्यम से, या शैली संपत्ति के प्रत्यक्ष डोम हेरफेर के माध्यम से। हालांकि, यह ऐसी शैली को नहीं हटाती है जिसे स्टाइलशीट या तत्व में सीएसएस नियम के साथ लागू किया गया है। चेतावनी: एक उल्लेखनीय अपवाद यह है कि, आईई 8 और उससे नीचे के लिए, सीमा या पृष्ठभूमि जैसे शॉर्टेंड प्रॉपर्टी को हटाकर स्टाइलशीट या तत्व में सेट किए जाने के बावजूद उस शैली को पूरी तरह से तत्व से हटा दिया जाएगा

3. तत्व की पूरी शैली को हटा रहा है

.removeAttr("style")

मैं jQuery के साथ सीएसएस बदल रहा हूं और मैं इनपुट मूल्य के आधार पर जो स्टाइल जोड़ रहा हूं उसे हटाना चाहता हूं:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

मैं यह कैसे कर सकता हूँ? ध्यान दें कि रंगीन पिकर (यानी जब माउस रंगीन चक्र पर चलता है) का उपयोग करते हुए रंग का चयन किया जाता है।

दूसरा नोट: मैं इसे css("background-color", "none") साथ नहीं कर सकता क्योंकि यह सीएसएस फ़ाइलों से डिफ़ॉल्ट स्टाइल को हटा देगा। मैं सिर्फ jQuery द्वारा जोड़ा background-color इनलाइन शैली को हटाना चाहता हूं।


आप जिस शैली को सीएसएस क्लास को हटाना चाहते हैं उसे क्यों न बनाएं? अब आप इसका उपयोग कर सकते हैं: .removeClass() । यह उपयोग करने की संभावना भी खुलता है: .toggleClass()

(अगर यह मौजूद है तो कक्षा को हटा दें, और अगर यह नहीं है तो इसे जोड़ें।)

लेआउट मुद्दों से निपटने के दौरान कक्षा को जोड़ना / निकालना भी भ्रमित / समस्या निवारण करने में कम भ्रमित है (जैसा कि एक विशेष शैली गायब होने का पता लगाने का प्रयास करने के विपरीत है।)


इसे इस्तेमाल करे

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');

इसे इस्तेमाल करे:

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

धन्यवाद


बस उपयोग कर रहे हैं:

$('.tag-class').removeAttr('style');

या

$('#tag-id').removeAttr('style');

मुझे शुद्ध जावास्क्रिप्ट के साथ एक शैली विशेषता को हटाने का तरीका मिला है ताकि आप शुद्ध जावास्क्रिप्ट के तरीके को जान सकें

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

यदि आप सीएसएस शैली का उपयोग करते हैं, तो आप इसका उपयोग कर सकते हैं:

$("#element").css("background-color","none"); 

और फिर इसके साथ प्रतिस्थापित करें:

$("#element").css("background-color", color);

यदि आप सीएसएस शैली का उपयोग नहीं करते हैं और आपके पास HTML तत्व में विशेषता है, तो आप इसका उपयोग कर सकते हैं:

$("#element").attr("style.background-color",color);

यह कुछ अन्य समाधानों की तुलना में अधिक जटिल है, लेकिन परिदृश्यों में अधिक लचीलापन प्रदान कर सकता है:

1) जिस स्टाइल को आप लागू करना / चुनना चाहते हैं उसे अलग करने के लिए एक वर्ग परिभाषा बनाएं (encapsulate)। यह खाली हो सकता है (और इस मामले के लिए, शायद होना चाहिए):

.myColor {}

2) gilly3 द्वारा इस उत्तर से http://jsfiddle.net/kdp5V/167/ पर आधारित इस कोड का उपयोग करें:

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

उपयोग उदाहरण: http://jsfiddle.net/qvkwhtow/

चेतावनियां:

  • व्यापक रूप से परीक्षण नहीं किया गया।
  • नए मूल्य में महत्वपूर्ण या अन्य निर्देश शामिल नहीं हो सकते हैं। इस तरह के किसी भी मौजूदा निर्देश इस हेरफेर के माध्यम से खो जाएगा।
  • स्टाइल चयनकर्ता की पहली बार पाए गए घटना को केवल बदलता है। पूरी शैलियों को जोड़ या हटा नहीं है, लेकिन यह कुछ और विस्तृत के साथ किया जा सकता है।
  • किसी भी अमान्य / अनुपयोगी मानों को अनदेखा कर दिया जाएगा या त्रुटि फेंक दी जाएगी।
  • क्रोम (कम से कम) में, गैर-स्थानीय (क्रॉस-साइट में) सीएसएस नियम दस्तावेज़.स्टाइलशीट्स ऑब्जेक्ट के माध्यम से प्रकट नहीं होते हैं, इसलिए यह उन पर काम नहीं करेगा। इस कोड के "पहले मिले" व्यवहार को ध्यान में रखते हुए, किसी को स्थानीय ओवरराइड जोड़ना होगा और उसमें हेरफेर करना होगा।
  • document.styleSheets सामान्य रूप से हेरफेर के लिए विशेष रूप से अनुकूल नहीं है, यह आक्रामक उपयोग के लिए काम करने की अपेक्षा न करें।

इस तरह स्टाइल को अलग करना सीएसएस क्या है, भले ही इसे जोड़ना न हो। सीएसएस नियमों में हेरफेर करना नहीं है कि jQuery क्या है, jQuery डीओएम तत्वों का उपयोग करता है, और इसे करने के लिए सीएसएस चयनकर्ताओं का उपयोग करता है।


यह भी काम करता है !!

$elem.attr('style','');

वेब विकास में सरल सस्ता है। मैं एक विशेष शैली को हटाने के दौरान खाली स्ट्रिंग का उपयोग करने की सलाह देते हैं

$(element).style.attr = '  ';

स्वीकार्य उत्तर काम करता है लेकिन मेरे परीक्षणों में डीओएम पर एक खाली style विशेषता छोड़ देता है। कोई बड़ा सौदा नहीं है, लेकिन यह सब हटा देता है:

removeAttr( 'style' );

यह मानता है कि आप सभी गतिशील स्टाइल को हटाना चाहते हैं और स्टाइलशीट स्टाइल पर वापस लौटना चाहते हैं।





css