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?

Mairamaire

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

Geld

This will remove styles applied directly to elements, but won't affect CSS. – Tonedeaf

Your code seems promising. Anyhow, I have to run the second snippet twice to take effect. Why? P.S.: .toLowerCase() – Mairamaire

Answer 2

If you have jQuery, you can probably do something like

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

Externalization

Answer 3

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

Unsuspected

Answer 4

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

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

Nitrogen

Answer 5

Only js, 1 row so you can easily use the console, therefore IMO are better answers it's another option:

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

Just for better reading:

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

Wineglass

Answer 6

If you want to reset all styles, you would need to clear all in-html styles, and override all CSS stylesheet rules. I've found the following solution to work for me.

1. As suggested in other answers, you can use element.removeAttribute("style") on whatever element you want (and recurse through each child).
2. You can't really remove certain CSS rules specifically (even though you can just remove the file, but that might remove rules not relevant to your element) by using all: unset (or all: revert as suggested here) to revert the styles of such an element to its default.

Orianna