Have you ever wonder what Twitter or any other site looks like without styles?
99% of the time all styles in a web page are coming from a style tag or an external stylesheet.
Here is the before:
document.querySelectorAll('style,link[rel="stylesheet"]') .forEach(element => element.remove())
In the code snippet above, I’m looking for all the style, and link tags.
I used the
remove() method from the fetched element to remove itself from the DOM tree.
ChildNode.remove() does not work on IE, but there is a polyfill version you can pick up from MDN website.
ChildNode.remove() MDN polyfill.
Here’s the output:
A fairly plain, and ugly site.
If any element have inline styles, then this method will not remove the styles.