मैं जावास्क्रिप्ट के साथ सभी इनलाइन शैलियों को कैसे मिटा सकता हूं और सीएसएस शैली शीट में निर्दिष्ट शैलियों को छोड़ सकता हूं?

94

यदि मेरे html में निम्नलिखित हैं:

<div style="height:300px; width:300px; background-color:#ffffff;"></div>

और यह मेरी सीएसएस शैली शीट में है:

div {
    width:100px;
    height:100px;
    background-color:#000000;
}

क्या कोई तरीका है, जावास्क्रिप्ट / jquery के साथ, सभी इनलाइन शैलियों को हटाने के लिए और केवल स्टाइल सीएसएस शैली शीट द्वारा निर्दिष्ट शैलियों को छोड़ने के लिए?

— मैट
स्रोत

166

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

या

$('div').removeAttr('style');( एंड्रेस के जवाब से )

इसे थोड़ा छोटा करने के लिए, इसे आज़माएँ:

$('div[style]').removeAttr('style');

इसे थोड़ा गति देना चाहिए क्योंकि यह जांचता है कि divs की शैली विशेषता है।

किसी भी तरह से, यह प्रक्रिया करने में आपको थोड़ा समय लग सकता है यदि आपके पास बड़ी मात्रा में divs है, तो आप जावास्क्रिप्ट के अलावा अन्य तरीकों पर विचार करना चाह सकते हैं।

— टायलर कार्टर
स्रोत

यदि इसे शैली विशेषता को निकालना है, तो इसे भी देखना होगा, इसलिए अंतिम समाधान ऐसा लगता है कि केवल कोड डायरियर को बना रहा है। पाठ्यक्रम का सबसे अच्छा केवल उन तत्वों का चयन करना होगा जिनकी आपको शैली हटाने की आवश्यकता है, संभवतः आईडी के माध्यम से।

— जोस फ़ेती

यह केवल divs को लक्षित करेगा। यदि आप सब कुछ लक्षित करना चाहते हैं तो क्या होगा?

— स्ट्रीटलाइट

1

एक तरफ से संबंधित के .css()रूप में, दूसरे मान के रूप में एक खाली स्ट्रिंग के साथ कॉल करना इनलाइन शैलियों से केवल नामित मूल्य को हटा देगा, जैसे $ ('div')। css ('डिस्प्ले', ''); सिर्फ इनलाइन प्रदर्शन संपत्ति (यदि सेट) को हटा देगा।

— टॉम डेविस

2

@streetlight $('*').removeAttr('style')सब कुछ लक्षित करने के लिए उपयोग करें ।

— २०:१४

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

32

सादा जावास्क्रिप्ट:

आप इस तरह से कुछ तुच्छ करने के लिए jQuery की जरूरत नहीं है। बस .removeAttribute()विधि का उपयोग करें ।

मान लें कि आप किसी एकल तत्व को लक्षित कर रहे हैं, तो आप आसानी से निम्नलिखित का उपयोग कर सकते हैं: (उदाहरण)

document.querySelector('#target').removeAttribute('style');

यदि आप कई तत्वों को लक्षित कर रहे हैं, तो तत्वों के चयनित संग्रह के माध्यम से लूप करें: (उदाहरण)

var target = document.querySelectorAll('div');
Array.prototype.forEach.call(target, function(element){
    element.removeAttribute('style');
});

Array.prototype.forEach()- IE9 और ऊपर / .querySelectorAll()- IE 8 (आंशिक) IE9 और ऊपर।

— जोश क्रोज़ियर
स्रोत

1

एक विकल्प Array.prototype.forEach.callकाफी अच्छी तरह से समर्थित स्पैट ऑपरेटर है, जो एक पंक्ति को बचाता है [... document.querySelectorAll('div')].forEach(div => div.removeAttribute('style')):।

22

$('div').removeAttr('style');

— एंड्रेस डेसक्ल्जो
स्रोत

क्या यह एट्री ('शैली', '') करने से अधिक कुशल है?

— मैट

$ ('div') के साथ। attr ('स्टाइल', ''); <div style = ""> </ div> $ ('div') के साथ। removeAttr ('style'); <div> </ div> अधिक साफ है

— andres descalzo

शायद, क्योंकि यह इसे शून्य मान पर सेट नहीं कर रहा है, लेकिन किसी भी तरह से आपको एक बड़ा प्रसंस्करण समय मिलने जा रहा है, क्योंकि इसे शरीर के प्रत्येक विभाग से गुजरना पड़ता है।

— टायलर कार्टर

हां, यह स्पष्ट है, इसे एक आईडी $ ("# आईडी") या एक वर्ग $ (".classDivs) में बदल दिया जाना चाहिए

— andres descalzo

3

मैं $('div').attr('style', '');तकनीक का उपयोग कर रहा था और यह IE8 में काम नहीं कर रहा था।

मैंने शैली विशेषता का उपयोग करके आउटपुट किया alert()और यह इनलाइन शैलियों को अलग नहीं कर रहा था।

.removeAttr IE8 में ट्रिक को पूरा करना।

— rtvenge
स्रोत

3

यदि आपको styleकिसी तत्व को बस खाली करने की आवश्यकता है तो:
element.style.cssText = null;
यह अच्छा करना चाहिए। आशा करता हूँ की ये काम करेगा!

— तुषार शुक्ला
स्रोत

एक समान तर्क लागू करने के लिए लगता है अगर एक तत्व के लिए केवल एक ही शैली की संपत्ति को "खाली" करने की कोशिश की जा रही है: element.style.display = null;- यही मुझे चाहिए: डी

— बिलाल अकिल

1

इसे दो चरणों में पूरा किया जा सकता है:

1: उस तत्व का चयन करें जिसे आप टैग्नैम, आईडी, क्लास आदि द्वारा बदलना चाहते हैं।

var element = document.getElementsByTagName('h2')[0];

शैली विशेषता निकालें

element.removeAttribute('style');

— JRulle
स्रोत

-2

आप स्टाइल शीट में सीएसएस को भी सूचीबद्ध करने का प्रयास कर सकते हैं!

— BoringCode
स्रोत

3

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

— joshvermaire