क्या jQuery के साथ इनलाइन शैलियों को निकालना संभव है?

Question

एक jQuery प्लगइन एक इनलाइन शैली ( display:block) लागू कर रहा है । मैं आलसी महसूस कर रहा हूं और इसके साथ ओवरराइड करना चाहता हूं display:none।

सबसे अच्छा (आलसी) तरीका क्या है?

Comments

SO पर मदद के लिए पूछें :)

— डेव स्वर्सकी

सबसे अच्छा तरीका और आलसी तरीका जरूरी नहीं है।

— जोएल

मैंने अक्सर यह तर्क सुना है कि सर्वश्रेष्ठ डेवलपर्स आलसी होते हैं ... blog.codinghorror.com/how-to-be-lazy-dumb-and-successful

— kaelle

दो तरीके से मैं प्राप्त कर सकता हूं, ई का उपयोग कर निकालेंएट्र () या .css () कोड का उपयोग करें codepedia.info/jquery-remove-inline-style

— सतिंदर सिंह

Answer 1

अद्यतन: जबकि निम्न समाधान काम करता है, एक बहुत आसान तरीका है। निचे देखो।

---

यहाँ मैं क्या लेकर आया हूँ, और मुझे आशा है कि यह काम आएगा - आपके या किसी और के लिए:

$('#element').attr('style', function(i, style)
{
    return style && style.replace(/display[^;]+;?/g, '');
});

यह उस इनलाइन शैली को हटा देगा।

मुझे यकीन नहीं है कि यह वही है जो आप चाहते थे। आप इसे ओवरराइड करना चाहते थे, जैसा कि पहले ही बताया गया है, आसानी से किया जाता है $('#element').css('display', 'inline')।

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

---

यहाँ यह प्लगइन प्रारूप में है:

(function($)
{
    $.fn.removeStyle = function(style)
    {
        var search = new RegExp(style + '[^;]+;?', 'g');

        return this.each(function()
        {
            $(this).attr('style', function(i, style)
            {
                return style && style.replace(search, '');
            });
        });
    };
}(jQuery));

यदि आप अपनी स्क्रिप्ट से पहले पृष्ठ में इस प्लगइन को शामिल करते हैं, तो आप बस कॉल कर सकते हैं

$('#element').removeStyle('display');

और वह चाल चलनी चाहिए।

---

अद्यतन : मुझे अब एहसास हुआ कि यह सब व्यर्थ है। आप बस इसे खाली करने के लिए सेट कर सकते हैं:

$('#element').css('display', '');

और यह स्वचालित रूप से आपके लिए निकाल दिया जाएगा।

यहाँ डॉक्स से एक उद्धरण है :

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

मुझे नहीं लगता कि jQuery यहां कोई जादू कर रहा है; ऐसा लगता है कि styleवस्तु मूल रूप से ऐसा करती है ।

Comments

@ सामी - थैंक्यू यार। मैं इस बारे में सोच रहा था, और मैंने फैसला किया कि यह समय की बर्बादी नहीं थी। यह इनलाइन शैलियों की जांच के लिए अपनाया जा सकता है, जिसके लिए वर्तमान में jQuery में कोई समर्थन नहीं है ( .css('property')आपको मूल्य देता है, लेकिन यह आपको नहीं बताता है कि यह इनलाइन शैली से आया है)।

— जोसेफ सिल्बर

मैं स्वतंत्र रूप से एक ही निष्कर्ष पर आया था - खाली स्ट्रिंग वह करना चाहता है जो हम चाहते हैं। यह आधिकारिक तौर पर एपीआई में प्रलेखित नहीं है, लेकिन उम्मीद है कि यह काम करता रहेगा।

— जॉन जेड

@Jonz - यह है आधिकारिक तौर पर दस्तावेज (जब यह जोड़ा गया है, हालांकि मैं नहीं जानता कि, मैं इसे वहाँ जब मैं मूल रूप से इस पोस्ट को देखकर याद नहीं है)। इसके अलावा, मुझे नहीं लगता कि jQuery यहाँ कुछ भी कर रहा है। मूल styleवस्तु एक ही तरीके से व्यवहार करने लगती है। मैंने इस जानकारी के साथ अपने जवाब में संशोधन किया।

— जोसेफ सिलबर

क्या यह फ़ॉन्ट-परिवार जैसी चीजों के साथ काम करता है, या - रेगेक्स को गड़बड़ करता है?

— TMH

@ मॉश - आप सिर्फ उपयोग क्यों नहीं करते $('#element').css('display', '')?

— जोसेफ सिलबर

Answer 2

.removeAttr("style") पूरी शैली के टैग से छुटकारा पाने के लिए ...

.attr("style") मान का परीक्षण करें और देखें कि क्या कोई इनलाइन शैली मौजूद है ...

.attr("style",newValue) कुछ और करने के लिए इसे सेट करने के लिए

Comments

यह सभी इनलाइन शैलियों को प्रभावित करेगा , न कि केवल display।

— SLaks

अच्छा बीमार लगता है इसे आज़माएं और आपको बता दें, मैं इनलाइन शैलियों का उपयोग कभी नहीं करता हूं ताकि सभी इनलाइन शैलियों को साफ करने में खुशी हो

— हेरोल्डो

@ अच्छी तरह से, इसका मतलब है कि "पूरे स्टाइल टैग से छुटकारा पाएं";)

— हेइज़ेनबर्ग

नमस्ते। क्या यह जांचने का एक तरीका है कि क्या कोई 'शैली' लागू की गई थी ... $ ('*'), किसी भी स्रोत से जैसे कि एक इनलाइन शैली, फ़ॉन्ट, बी, मजबूत, सीएसएस फ़ाइल की तरह स्टाइल एट्रीब्यूट .. से पहले करने के लिए निकालें / कुछ भी रीसेट करें या सिर्फ एक ही शॉट रीसेट करें?

— मिल्के पैटर

चूंकि प्रत्येक इनलाइन शैली को व्यक्तिगत रूप से हटाने से (अब-खाली) styleविशेषता नहीं निकलती है, फिर भी यह ध्यान देने योग्य है।

— ब्रिलियनड

Answer 3

इनलाइन शैलियों को हटाने का सबसे आसान तरीका (jQuery द्वारा उत्पन्न) होगा:

$(this).attr("style", "");

इनलाइन कोड गायब हो जाना चाहिए और आपकी वस्तु आपके सीएसएस फाइलों में पूर्वनिर्धारित शैली को अनुकूलित करना चाहिए।

मेरे लिए काम किया!

Answer 4

आप jQuery की cssविधि का उपयोग करके शैली सेट कर सकते हैं :

$('something:visible').css('display', 'none');

Comments

@ कोबी: वह किसी भी इनलाइन शैली के बारे में पूछ रहा है।

— SLaks

गलत, क्या? मुझे शायद कुछ समझ नहीं आ रहा है। मैं के बारे में सोच रहा हूँ <div style="display:block;">, $('div').hide()।

— कोबी

@ कोबी: hideइनलाइन शैलियों को संशोधित करने के एक विशेष मामले को संबोधित करता है। यह उत्तर सभी मामलों को संबोधित करता है। ( hide/showयह भी एक सीमा है कि दो के रूप में दो मूल्यों को टॉगल किया जाता है। यानी कोई नहीं-> ब्लॉक या कोई नहीं- इनलाइन।)

— जोएल

@Joel: hide/ showके पुराने मूल्य को याद रखेगा displayऔर उसे सही ढंग से पुनर्स्थापित करेगा।

— SLaks

@ एसएलएसी: कूल। यह हाल ही में जोड़ा गया है, जैसा कि मुझे याद है कि इससे पहले से परेशानी हो रही थी।

— जोएल

Answer 5

आप इस तरह एक jQuery प्लगइन बना सकते हैं:

jQuery.fn.removeInlineCss = (function(){
    var rootStyle = document.documentElement.style;
    var remover = 
        rootStyle.removeProperty    // modern browser
        || rootStyle.removeAttribute   // old browser (ie 6-8)
    return function removeInlineCss(properties){
        if(properties == null)
            return this.removeAttr('style');
        proporties = properties.split(/\s+/);
        return this.each(function(){
            for(var i = 0 ; i < proporties.length ; i++)
                remover.call(this.style, proporties[i]);
        });
    };
})();

प्रयोग

$(".foo").removeInlineCss(); //remove all inline styles
$(".foo").removeInlineCss("display"); //remove one inline style
$(".foo").removeInlineCss("color font-size font-weight"); //remove several inline styles

Comments

इस उत्तर में एक बहुत साफ-सुथरी एक-लाइन ट्रिक शामिल है जो कि jQuery के बिना भी उपयोगी है और जो कई देवों को नहीं पता हो सकता है - कॉलिंग elem.style.removeProperty('margin-left')केवल विशेषता margin-leftसे हटा देगा style(और उस संपत्ति के मूल्य को वापस करेगा)। IE6-8 के लिए elem.style.removeAttribute()।

— क्रेगपेटिक

Answer 6

आलसी तरीका (जो भविष्य के डिजाइनरों को आपके नाम का अभिशाप देगा और आपकी नींद में हत्या कर देगा):

#myelement 
{
    display: none !important;
}

अस्वीकरण: मैं इस दृष्टिकोण की वकालत नहीं करता, लेकिन यह निश्चित रूप से आलसी तरीका है।

Comments

यह स्पष्ट रूप से सवाल का सबसे अच्छा जवाब है क्योंकि इसके अभ्यास की भावना में "आलसी" है। चीयर्स!

— ktamlyn

Answer 7

$('div[style*=block]').removeAttr('style');

Comments

क्या सिर्फ $ ('div [शैली]') के बारे में।

— स्काईबॉन्डर्स

@skybondsor इसे केवल ब्लॉक एलिमेंट्स के लिए नहीं हटाएगा, जैसे वह इसे चाहता था

— antapaw

आह येस। मुझे लगा कि वह हर चीज से इनलाइन स्टाइल हटाना चाहते हैं।

— स्काईबॉन्डर्स

Answer 8

$("[style*=block]").hide();

Answer 9

यदि आप किसी शैली विशेषता के भीतर कोई गुण निकालना चाहते हैं - तो इसे किसी और चीज़ पर सेट न करें - आप removeProperty()विधि का उपयोग करते हैं :

document.getElementById('element').style.removeProperty('display');

---

अद्यतन:
मैंने विभिन्न तरीकों और उनके परिणामों के साथ खेलने के लिए एक इंटरैक्टिव फिडेल बनाया है । जाहिर है set to empty string, set to faux valueऔर , के बीच बहुत अंतर नहीं है removeProperty()। वे सभी एक ही नतीजे पर आते हैं - जो या तो पूर्व-दिए गए सीएसएस नियम या ब्राउज़र का डिफ़ॉल्ट मान है।

Answer 10

यदि आपकी शैली से प्रदर्शन एकमात्र पैरामीटर है, तो आप सभी शैली को हटाने के लिए इस आदेश को चला सकते हैं:

$('#element').attr('style','');

इसका मतलब है कि यदि आपका तत्व पहले इस तरह दिखता था:

<input id="element" style="display: block;">

अब आपका तत्व इस तरह दिखाई देगा:

<input id="element" style="">

Answer 11

यहाँ एक इनलाइन सेलेक्टर फ़िल्टर है जिसे मैंने लिखा था कि प्लग इन jQuery।

$("div:inlineStyle(display:block)") // will select all divs with an inline style of display: block set

आपके मामले में आप इस तरह का उपयोग कर सकते हैं:

$("div:inlineStyle(display:block)").hide();

Answer 12

अब शैली लागू करने के लिए प्लगइन बदलें। यह शैली को वहां से हटाने के बाद बहुत बेहतर होगा।

Comments

इसलिए 'आलसी'! खिचड़ी भाषा का पता लगाने के लिए कि यह कौन सा प्लगइन है!

— हेरोल्डो

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

— जोश स्टोडोला

कोनसा रास्ता? यदि आप प्लगइन को संपादित करते हैं तो आपको नए संस्करण को अपडेट करने के बाद समस्याएं हो सकती हैं जो आपके परिवर्तन को खत्म कर देगा और लेआउट को गड़बड़ कर देगा। एक वर्ष या इतने समय में कौन याद रखेगा कि आपने उस एक छोटे से समायोजन को बनाया है? मैं हमेशा

— ज़ीफिरिन

Answer 13

$el.css({ height : '', 'margin-top' : '' });

आदि...

बस दूसरा परम खाली छोड़ दो!

Comments

यदि आप लोग कुछ वोट करते हैं, तो कृपया एक टिप्पणी छोड़ दें।

— उन्होंने 11

मुझे लगता है कि होगा क्योंकि आप का जवाब नहीं दिया आप downvotes मिला प्रश्न पूछा : "jQuery plugin is applying an inline style (display:block). I'm feeling lazy and want to override it with display:none"। हालाँकि आपका पाठ सही है, आपका कोड प्रश्न को हल नहीं करता है।

— कोडिंग

मेरे पास जो समस्या थी, उसे हल किया। Tnx।

— योद्राल

Answer 14

$("#element").css({ display: "none" });

सबसे पहले मैंने सीएसएस में इनलाइन शैली को हटाने की कोशिश की, लेकिन यह काम नहीं करता है और प्रदर्शन की तरह नई शैली: कोई भी ओवरराइट नहीं किया जाएगा। लेकिन JQuery में यह इस तरह काम करता है।

Answer 15

मेरे पास चौड़ाई संपत्ति के साथ ऐसा ही मुद्दा था। मैं कोड से महत्वपूर्ण को हटा नहीं सका, और चूंकि इस शैली को एक नए टेम्पलेट पर मेरी आवश्यकता थी, इसलिए मैंने एक आईडी (modalstyling) को तत्व में जोड़ा और बाद में मैंने निम्नलिखित कोड को टेम्पलेट में जोड़ा:

<script type="text/javascript">
    $('#modalstyling').css('width', '');    //Removal of width !important
    $('#modalstyling').width('75%');        //Set custom width
</script>