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

Question

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

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

मैं यह कैसे कर सकता हूँ?
ध्यान दें कि जब भी कोई रंग पिकर का उपयोग करके चुना जाता है, तो ऊपर की रेखा चलती है (यानी जब माउस किसी रंग के पहिये से आगे बढ़ता है)।

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

Comments

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

— क्रिस मोशचिनी

बेहतर अपने fcuntionality के आधार पर addClass / removeClass का प्रयास करें। यह अभ्यस्त अन्य स्टाइल को प्रभावित करता है।

— प्रभाकरन

Answer 1

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

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

Comments

@baacke यह शर्म की बात है जब माना "मानक" बहुत पुराना है और विकास के बहुत से समय बर्बाद करता है। मेरे पास निगमों के लिए बहुत कम सहानुभूति है जो पुराने सॉफ्टवेयर का उपयोग करने के लिए चुनते हैं, मैं नहीं देखता कि मुझे उनके लिए विकसित करने के लिए अतिरिक्त समय क्यों बिताना चाहिए।

— andrewb

मुझे यहाँ @baacke के साथ रहना है। हमारे ग्राहक को अभी भी IE6 (!!) की आधिकारिक न्यूनतम आवश्यकता है। समस्या यह है कि उनके ग्राहक कम विकसित देशों सहित पूरी दुनिया में हैं। "ग्राहक के ग्राहक" हमारे ग्राहक के साथ व्यापार करने के लिए बहुत पुराने कंप्यूटरों का उपयोग कर सकते हैं । इसलिए पुराने ब्राउज़र का कम से कम समर्थन होना चाहिए या वे व्यापार खोने का जोखिम उठा सकते हैं ...

— user1429080

आप लोग किसी क्लाइंट के लिए विकसित किए गए किसी भी समाधान की आवश्यकताओं को निर्धारित नहीं करते हैं। यदि वह क्लाइंट पुराने ब्राउज़र के लिए समर्थन चाहता है या चाहता है, तो उसे प्रदान करने के लिए आपका काम है, अवधि। आप लोग "कौन परवाह करता है" के बारे में बात करते हैं, सच्चे इंजीनियरों को एक बुरा नाम देते हैं।

— एड डेगें

@EdDeGagne - आपको लगातार IE के पुराने संस्करणों का समर्थन बंद करने की आवश्यकता है। यह आपके कोडबेस को बेहतर बनाता है और आगंतुकों को एक पुराने IE का उपयोग न करने के लिए प्रेरित करता है। केवल मुश्किल बात यह पता लगाना है कि आप समर्थन कब छोड़ सकते हैं। Google की वेबसाइटें, बहुत सारे आगंतुक हैं, अगर उन्होंने एक पुराने IE को छोड़ने का फैसला किया है, तो आप उन पर भरोसा कर सकते हैं कि यह एक अच्छा निर्णय था। एक कंपनी ने अपने उपयोगकर्ताओं को यह बताने तक भी कहा कि यह उनके लिए प्रत्येक पुराने IE उपयोगकर्ता को खरीदने के लिए अधिक भुगतान करता है एक आधुनिक कंप्यूटर से अपने IE कोड को बनाए रखने के लिए (जो कि वास्तव में वे पेशकश करते हैं)।

— janko-m

मैंने पढ़ना बंद कर दिया जब मैंने देखा कि "IE8 अभी भी मानक है, यहां तक ​​कि विंडोज 7 पर भी"

— कैप्सूल

Answer 2

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

removeAttr( 'style' );

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

Comments

यह एक अच्छा विचार है लेकिन jQuery में छोटी गाड़ी है, प्रस्तुत बग देखें: Bugs.jquery.com/ticket/9500

— Tosh

@Tosh कि बग था संकल्प 2011/08/25: bugs.jquery.com/...

— ThinkingStiff

मुझे पता है लेकिन कम से कम संस्करण १. it's में यह अभी भी छोटी गाड़ी है, मैंने

— ११.

यह स्टाइल विशेषता में अन्य सभी गुणों को भी हटा देगा। इसलिए बुद्धिमानी से चुनें।

— कोडिंग्रि जूल

यह चतुर है! स्वीकृत उत्तर उन परिस्थितियों में काम नहीं करेगा जहाँ इनलाइन शैली को jquery द्वारा सीएसएस शैलियों को अधिलेखित किया जाना चाहिए, लेकिन यह विधि सभी स्थितियों में ठीक काम करती है।

— फरजाद वाईज

Answer 3

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

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

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

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

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

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

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

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

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

3. तत्व की पूरी शैली को निकालना

.removeAttr("style")

Answer 4

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

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

Comments

लड़का पहले से ही jQuery का उपयोग करता है ... एक क्रॉस-ब्राउज़र विधि को फिर से लागू करने में क्यों परेशान होता है?!?!?

— बिली

क्योंकि jquery हर चीज नहीं है, क्योंकि उसे या शायद मुझे हर एक को यह कहना चाहिए कि डेवलपर्स को पता होना चाहिए कि संगतता का क्या मतलब है और जावास्क्रिप्ट के रूप में कोर भाषाओं के साथ ऐसा सामान कैसे करना है, शायद यह मेरा सिद्धांत है जिसे मैंने पहले से ही अपना खुद का ढांचा बनाया है। कोर जावास्क्रिप्ट के अपने ज्ञान से मैं दूसरों की उन चीजों का उपयोग करने से इनकार करता हूं जिनके पास मेरी अपनी अवधारणा और मेरे सोचने का तरीका है :) और वैसे आपके (-) के लिए धन्यवाद, मुझे बस मूल्य जोड़ने की आवश्यकता है :) और वह भी जिस तरह से लड़का एक लड़का वह एक एलेक्स नाम की लड़की नहीं है

— मारवान

मैं सिर्फ यह नोट करना चाहता हूं कि यदि आप इसका उपयोग नहीं करते हैं, तो आपको दस्तावेज़ की जांच नहीं करनी चाहिए। शायद आप इसे इस तरह से जाँचेंगे: अगर (elm.style.removeProperty) {elm.style.removeProperty (propertyName); } और यदि (elm.style.removeAttribute) {elm.style.removeAttribute (विशेषता); }

— रिचर्ड

ठीक है, आप इसे इस तरह से होना चाहिए अगर (navigator.appName == "Microsoft इंटरनेट एक्सप्लोरर") document.body.style.removeAttribute ('पृष्ठभूमि-रंग'); अन्य दस्तावेज़ .body.style.removeProperty ('पृष्ठभूमि-रंग'); और दूसरी ओर आपका समाधान भी सही है :) आपके नोट के लिए धन्यवाद

— मारवान

नहीं, आपको निश्चित रूप से जांचना चाहिए कि क्या वह फ़ंक्शन ब्राउज़र की जांच के बजाय मौजूद है या नहीं। क्या होगा यदि एमएस IE के अगले संस्करण में फ़ंक्शन का नाम बदलने का फैसला करता है? क्या आप तब जाकर IE के संस्करण की भी जांच करेंगे?

— j03w

Answer 5

यह पूरा टैग हटा देगा:

  $("body").removeAttr("style");

Comments

यह किसी न किसी समाधान है और हमेशा काम नहीं करेगा क्योंकि यह संपूर्ण तत्व की शैली को निकालता है

— कॉन्स्टेंटिन ज़ादिरन

Answer 6

या तो jQuery के कार्यों में काम करना चाहिए:

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

Comments

केवल एक सीएसएस संपत्ति को हटाने के लिए:var cssObject = $('selector').prop('style'); cssObject.removeProperty('background-color');

— ilgaar

इगार - आपका समाधान सबसे साफ है। मैंने इसे एक '.each' लूप में टेबल सेल्स के ढेर के लिए रखा था जिसमें "डिस्प्ले: कोई नहीं" था जिसे जाना था लेकिन अन्य गुणों के साथ जो रहना था। यह त्रुटिपूर्ण रूप से काम करता है, बस प्रदर्शन को हटाता है: कोई भी नहीं और बाकी को छोड़कर।

— रोब वॉन नेसलरोड

Answer 7

बस का उपयोग कर:

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

या

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

Comments

यह केवल रंग ही नहीं, बल्कि अन्य शैलियों को भी जोड़ा जाएगा।

— लॉन्गइंट

Answer 8

कैसे कुछ के बारे में:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

Comments

मैं यह पसंद है! आप निर्दिष्ट संपत्ति को हटा दें और कुछ नहीं।

— जोएल

Answer 9

मेरे प्लगइन का उपयोग करें:

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

अपने मामले के लिए, इसे निम्नानुसार उपयोग करें:

$(<mySelector>).removeCss();

या

$(<mySelector>).removeCss(false);

यदि आप सीएसएस को अपनी कक्षाओं में परिभाषित करना चाहते हैं:

$(<mySelector>).removeCss(true);

Comments

$(this).removeAttrबेमानी है और this.removeAttrपर्याप्त होना चाहिए।

— एमिल बर्जरॉन

क्या एटर removeAttr को भी हटा देगा class? मुझे ऐसा नहीं लगता

— अब्देनौर TOUMI

मैं removeAttrआपके प्लग इन के बारे में बात कर रहा हूँ , जहाँ thisपहले से ही एक jQuery तत्व है। $(this)बेमानी है।

— एमिल बर्जरोन

आह! ठीक है ठीक है .. @EmileBergeron, पुराने jquery उदाहरण के thisरूप HTMLElementमें jQuery तत्व को मैप करता है ... जैसा कि आप देखते हैं, मेरा उत्तर पुराना है ... इसीलिए .. वैसे भी, मैं आपको बता सकता हूं कि वे क्यों बदलते हैं, वे ऐसा करते हैं तीर फ़ंक्शन के कारण जो ES6 में नया आता है। .. और thisबेकार हो जाता है और इसे event.currentTarget

— अब्देनॉर टुमी

काफी उचित! ;) अजीब बात है कि जेएस दुनिया में 3 साल पुराना है।

— एमिल बर्जरॉन

Answer 10

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

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

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

धन्यवाद

Comments

आपके "मौजूदा को हटाएं" के साथ एकमात्र समस्या यह है कि यह एक सेट होने पर स्टाइलशीट की पृष्ठभूमि को भी ओवरराइड करेगा।

— Jtbs

Answer 11

यदि आप CSS स्टाइल का उपयोग करते हैं, तो आप उपयोग कर सकते हैं:

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

और फिर इसके साथ बदलें:

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

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

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

Answer 12

2018

इसके लिए देशी एपीआई है

element.style.removeProperty(propery)

Answer 13

यह भी एक काम !!

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

Answer 14

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

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

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

Answer 15

let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

Answer 16

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

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

.myColor {}

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

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 ऑब्जेक्ट के माध्यम से उजागर नहीं किया जाता है, इसलिए यह उन पर काम नहीं करेगा। इस कोड के "पहले पाए गए" व्यवहार को ध्यान में रखते हुए, एक स्थानीय ओवरराइड को जोड़ना होगा और उसमें हेरफेर करना होगा।
• document.styleSheets सामान्य रूप से हेरफेर करने के लिए विशेष रूप से अनुकूल नहीं है, आक्रामक उपयोग के लिए यह काम करने की अपेक्षा न करें।

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

Answer 17

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

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

Answer 18

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

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