simplest way to remove all the styles in a page
If you have jQuery, you can probably do something like
$('link[rel="stylesheet"], style').remove();
$('*').removeAttr('style');
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);
});