पृष्ठ में सभी शैलियों को हटाने का सबसे आसान तरीका

Question

फ़ायरफ़ॉक्स में View > Page Style > No Style करने के समान परिणाम प्राप्त करने के लिए मुझे जावास्क्रिप्ट का उपयोग करके किसी पृष्ठ में सभी स्टाइल परिभाषाओं को हटाने की आवश्यकता है। सबसे आसान तरीका कौन सा है?

function removeStyles(el) { 
    el.removeAttribute('style'); 

    if(el.childNodes.length > 0) { 
     for(var child in el.childNodes) { 
      /* filter element nodes only */ 
      if(el.childNodes[child].nodeType == 1) 
       removeStyles(el.childNodes[child]); 
     } 
    } 
} 

removeStyles(document.body); 

जुड़ा हुआ स्टाइलशीट निकालने के लिए:

Answer 1

की तरह कुछ आप रिकर्सिवली सभी तत्वों के माध्यम से पुनरावृति और style विशेषता को हटा सकते हैं कर सकते हैं आप इसके अलावा, निम्नलिखित स्निपेट का उपयोग कर सकते हैं:

var stylesheets = document.getElementsByTagName('link'), i, sheet; 

for(i in stylesheets) { 
    sheet = stylesheets[i]; 

    if(sheet.getAttribute('type').toLowerCase() == 'text/css') 
     sheet.parentNode.removeChild(sheet); 
} 

Answer 2

आप jQuery है, तो आप शायद

$('link[rel="stylesheet"], style').remove(); 
$('*').removeAttr('style'); 

Answer 3

ES6 Array.from

Array.from(document.querySelectorAll('link[rel="stylesheet"], style')) 
    .forEach(elem => elem.parentNode.removeChild(elem)); 

Answer 4

का उपयोग करते हुए यहाँ ES6 अच्छाई आप सिर्फ एक लाइन के साथ कर सकते हैं।

1) सभी इनलाइन शैलियों को निकालने के लिए (जैसे: style="widh:100px")

Array.from(document.querySelectorAll('[style]')) 
    .forEach(el => el.removeAttribute('style')); 

2) निकालने के लिए लिंक बाहरी स्टाइलशीट (जैसे: <link rel="stylesheet")

Array.from(document.querySelectorAll('link[rel="stylesheet"]')) 
    .forEach(el => el.parentNode.removeChild(el)); 

3) सभी इनलाइन शैली टैग निकालने के लिए (उदाहरण: <style></style>)

Array.from(document.querySelectorAll('style')) 
    .forEach(el => el.parentNode.removeChild(el));