删除页面中所有样式的最简单方法

我需要使用javascript删除页面中的所有样式定义，以获得与在Firefox中执行View > Page Style > No Style相同的结果。 哪种方法最简单？

Answer 1

您可以递归遍历所有元素并删除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); 

要删除链接的样式表，您还可以使用以下代码段：

 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

实际上， document.querySelectorAll返回具有forEach方法的NodeList 。

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

Answer 4

这是ES6的优点，只需一行即可完成。

1）删除所有内联样式（例如： style="widh:100px" ）

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

2）删除链接外部样式表（例如： ）

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

3）删除所有内联样式标签（例如：

）

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