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

Question

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

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

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

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