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 i

Answer 1

Here is the ES6 goodness you can do with just one line.

1) To remove all inline styles (eg: style="widh:100px")

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

2) To remove link external stylesheet (eg: <link rel="stylesheet")

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

3) To remove all inline style tags (eg: <style></style>)

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

Answer 2

Actually, document.querySelectorAll returns NodeList which has forEach method.

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

Answer 3

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

Answer 4

If you have jQuery, you can probably do something like

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