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

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

2012-02-12 tic

可以递归迭代通过的所有元素，并删除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); 
}

来源

2012-02-12 21:35:40 xandercoded

这将删除直接应用的样式元素，但不会影响CSS。 – 2012-02-12 22:30:06

@kennis谢谢你指出 - 只是我的答案... – xandercoded 2012-02-12 22:39:32

你的代码似乎很有希望。无论如何，我必须运行第二个片段两次才能生效。为什么？ P.S .: .toLowerCase（） – tic 2012-02-12 22:59:51

如果您有jQuery的，你也许可以这样做

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

来源

2012-02-12 21:35:07 Joe

使用ES6 Array.from

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

来源

2017-02-16 03:30:43 Londeren

这里是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));

来源

2017-10-16 16:41:47

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

回答

相关问题