CODEWITHSUNDEEP
javascriptjquerystyles
tic
tic

Reputation: 4189

simplest way to remove all the styles in a page

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?

Upvotes: 16

Views: 28324

Answers (6)

py660
py660

Reputation: 147

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.

Upvotes: 0

Alex
Alex

Reputation: 35399

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

Upvotes: 20

Erick de Vathaire
Erick de Vathaire

Reputation: 173

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

Upvotes: 0

Rajkeshwar Prasad
Rajkeshwar Prasad

Reputation: 899

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

Upvotes: 10

Londeren
Londeren

Reputation: 3331

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

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

Upvotes: 4

Joe
Joe

Reputation: 15802

If you have jQuery, you can probably do something like

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

Upvotes: 11

Related Questions