Skip to content

Disable All CSS on a Page with JavaScript

Disable all CSS on a page with JavaScript

Let’s say you want to verify the order in which the content is displayed, or you want to test the accessibility of a page when styles are disabled.

We can do that by running a single line of JavaScript.

Let’s get started!

Remove CSS on a Page

Go to a page for which you want to disable the styles and open the browser console (F12).

Before running the code I just want to let you know that pasting JavaScript code into the browser console can pose security risks.

The code could steal sensitive information and exploit vulnerabilities. Do not paste JavaScript code from untrusted sources.

Now that I’ve made that clear, you can run the following code:

document.querySelectorAll('style, link[rel="stylesheet"]').forEach(e => e.remove());

The code finds all the <style> and <link rel="stylesheet"> elements on the page and removes them.

This is what the Neutron Dev YouTube page looks like without CSS:

Neutron Dev YouTube page without CSS

🎥 Full video walkthrough:


Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.   
  

Comments