javascript - simplest way to remove all the styles in a page

Question

I need to remove all the style definitions in a page using javascript, to obtain the same result as doing View > Page Style > No Style in Firefox. Which is the simplest way?

Answer 1

You can recursively iterate through all elements and remove the style attribute:

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

Or:

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

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

Usage:

removeStyles(document.body);

To remove linked stylesheets you can, in addition, use the following snippet:

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

Or:

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

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