Question

我需要使用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

只需一行就可以完成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));

Answer 4

实际上，document.querySelectorAll会返回NodeList个forEach方法。

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

Answer 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)
    )
)

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

5 个答案: