JavaScript: enable and disable stylesheets

There is a quick and simple solution to enable or disable stylesheets with JavaScript.

We only need to toggle the boolean property disabled associated with every styleSheet object.

'use strict';

const disableStyles = () => {
    for(let i = 0; i < document.styleSheets.length; i++) {
        document.styleSheets[i].disabled = true;
    }
};

const enableStyles = () => {
    for(let i = 0; i < document.styleSheets.length; i++) {
        document.styleSheets[i].disabled = false;
    }
};

document.addEventListener('DOMContentLoaded', () => {
   document.querySelector('#disable').addEventListener( 'click', disableStyles);
    document.querySelector('#enable').addEventListener( 'click', enableStyles);
});

You can see the above code in action on the following page.