Najprostszy sposób na usunięcie wszystkich stylów na stronie

Question

Potrzebuję usunąć wszystkie definicje stylów na stronie przy użyciu javascript, aby uzyskać taki sam wynik jak w przeglądarce View > Page Style > No Style. Który jest najprostszy sposób?

Answer 1

Można rekurencyjnie iteracji poprzez wszystkie elementy i usunąć atrybut 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); 

Aby usunąć powiązane arkusze stylów możesz dodatkowo skorzystać z następującego fragmentu:

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

Jeśli masz jQuery, prawdopodobnie można zrobić coś

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

Answer 3

Korzystanie ES6 Array.from

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

Answer 4

Oto dobroć ES6 można zrobić tylko z jednej linii.

1) Aby usunąć wszystkie style inline (np style="widh:100px")

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

2) W celu usunięcia Link zewnętrzny arkusz stylów (np: <link rel="stylesheet")

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

3) Aby usunąć wszystkie znaczniki stylu inline (np: <style></style>)

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