Randomize CSS Rules

Question

I was working on a website, and I thought of how funny it would be if I completely randomized the CSS rules on the page as a joke. (Not just the elements' styles, but the CSS rules themselves, because the website has a lot of dynamically created elements.) Each time you loaded the page the result would be completely different, and most of them would look terrible. So my question has two parts:

Using JavaScript/JQuery, How do you programmatically get a list of all CSS rules? As a sort of dictionary, with the rules paired to the selectors.

Then, after you have broken down the list and randomly assigned each rule to a different selector, how do you delete the previous rules and substitute in your own?

NOTE: I mean, using JavaScript/JQuery, how do you randomize the rules on the client side, not just a single CSS file.

Answer 1

You can access and traverse all the stylesheets with document.styleSheets. See the API documentation on MDN