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

Posted 2023-02-22

【中文标题】删除页面中所有样式的最简单方法

【英文标题】：simplest way to remove all the styles in a page

【发布时间】：2012-03-04 09:38:07

【问题描述】：

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

【参考方案1】：

您可以递归迭代所有元素并删除style 属性：

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

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

或者：

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

    el.childeNodes.forEach(x => 
        if(x.nodeType == 1) removeStyles(x)
    )

用法：

removeStyles(document.body);

要删除链接的样式表，您还可以使用以下 sn-p：

const stylesheets = [...document.getElementsByTagName('link')];

for(let i in stylesheets) 
    const sheet = stylesheets[i];
    const type = sheet.getAttribute('type');

    if(!!type && type.toLowerCase() == 'text/css')
        sheet.parentNode.removeChild(sheet);

或者：

const sheets = [...document.getElementsByTagName('link')];

sheets.forEach(x => 
    const type = x.getAttribute('type');
    !!type && type.toLowerCase() === 'text/css'
        && x.parentNode.removeChild(x);
);

【讨论】：

这将删除直接应用于元素的样式，但不会影响 CSS。

您的代码看起来很有希望。无论如何，我必须运行第二个 sn -p 两次才能生效。为什么？ PS：.toLowerCase()

@tic 是的，.toLowerCase() 是正确的 - 监督取自 C#：P

【参考方案2】：

如果你有 jQuery，你可能可以做类似的事情

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

【参考方案3】：

这是 ES6 的优点，您只需一行代码。

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

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

2) 删除链接外部样式表（例如：<link rel="stylesheet"）

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

3) 删除所有内联样式标签（例如：<style></style>）

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

【参考方案4】：

实际上，document.querySelectorAll 返回NodeList，其中有forEach 方法。

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

【参考方案5】：

只有 js，1 行，因此您可以轻松使用控制台，因此 IMO 是更好的答案，这是另一种选择：

["style", "link"].forEach((t) => Array.from(document.getElementsByTagName(t)).forEach((i) => i.parentElement.removeChild(i)))

为了更好的阅读：

["style", "link"].forEach((t) =>
    Array.from(
        document.getElementsByTagName(t)
    ).forEach((i) =>
        i.parentElement.removeChild(i)
    )
)