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?

Alex · Accepted Answer · 2020-09-30T18:14:41.263

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

This will remove styles applied directly to elements, but won't affect CSS. — Kevin Ennis, Feb 12 '12 at 22:30
Your code seems promising. Anyhow, I have to run the second snippet twice to take effect. Why? P.S.: .toLowerCase() — tic, Feb 12 '12 at 22:59
@tic yeah, `.toLowerCase()` is correct - oversight taken from C# :P — Alex, Feb 12 '12 at 23:06

score 11 · Answer 2 · answered Feb 12 '12 at 21:35

11

If you have jQuery, you can probably do something like

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

answered Feb 12 '12 at 21:35

Joe

15,669
4
48
83

score 9 · Answer 3 · edited Sep 06 '18 at 11:44

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

Londeren · Answer 4 · 2018-03-12T12:20:15.790

4

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

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

edited Mar 12 '18 at 12:20

answered Feb 16 '17 at 03:30

Londeren

3,202
25
26

score 0 · Answer 5 · answered Mar 13 '21 at 04:10

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

simplest way to remove all the styles in a page

5 Answers5

Linked