2012-02-12 8 views

Respuesta

13

Puede recursiva iterar través de todos los elementos y quitar el atributo 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); 

Para quitar las hojas de estilo vinculadas puede, además, usar el siguiente fragmento:

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); 
} 
+0

Esto eliminará los estilos aplicados directamente a los elementos, pero no afectará a CSS. –

+0

@kennis Gracias por señalar eso, acabo de enmendar mi respuesta ... – xandercoded

+0

Su código parece prometedor. De todos modos, tengo que ejecutar el segundo fragmento dos veces para que tenga efecto. ¿Por qué? P.S .: .toLowerCase() – tic

8

Si tiene jQuery, es probable que pueda hacer algo como

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

Usando ES6 Array.from

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

Aquí es la bondad ES6 se puede hacer con una sola línea.

1) Para eliminar todos los estilos en línea (por ejemplo: style="widh:100px")

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

2) Para eliminar el enlace de estilo externa (por ejemplo: <link rel="stylesheet")

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

3) Para eliminar todas las etiquetas de estilo en línea (por ejemplo: <style></style>)

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