I threw this together as a “minimal as I could get it” POC. I’lll say one thing, by the time you get done you’ll be no stranger to selectors
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>CSS Switch Test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" >
<style type="text/css">
/* default styles */
body {
font-family: sans-serif;
}
#heading {
border: 1px solid #f00;
background-color: #faa;
padding: 0.2em;
}
p {
border: 1px solid #333;
padding: 0.2em;
}
.programmer_ipsum {
background-color: #000;
color: #fff;
font-family: monospace;
font-weight: bold;
}
</style>
<script>
// script needed before the DOM is loaded here
</script>
</head>
<body>
<h1 id="heading">CSS Switch Test</h1>
<p class="cat_ipsum">
Lounge in doorway rub face on everything, so flee in terror at cucumber discovered on floor, meow meowzer! or paw at beetle and eat it before it gets away tuxedo cats always looking dapper.
</p>
<p class="kiwi_ipsum">
After the pinapple lump is flogged, you add all the hammered jerseys to the Jafa you've got yourself a meal.
</p>
<p class="piate_ipsum">
Avast chantey crack Jennys tea cup draft Yellow Jack heave to capstan lookout Letter of Marque loaded to the gunwalls pressgang stern long clothes furl mutiny Barbary Coast execution dock scallywag driver line man-of-war long boat jolly boat hail-shot piracy brig brigantine fathom smartly ballast black spot case shot measured fer yer chains main sheet spike parrel quarter gangway gabion grog Davy Jones' Locker deadlights hearties cackle fruit matey bring a spring upon her cable crimp walk the plank yard doubloon.
</p>
<p class="programmer_ipsum">
Null pointer exception handling cpan null c# stdin subroutine hypertext markup language compiler parenthesis.
</p>
<button value="1">Style One</button>
<button value="2">Style Two</button>
<button value="3">Style Three</button>
<script>
// script that needs the DOM to be loaded here
function switch_style(option) {
var style_tag = document.head.querySelector('style');
var optional_styles = {
'1': "body {font-family: sans-serif;} #heading {border: 1px solid #f00; background-color: #faa; padding: 0.2em;} p { border: 1px solid #333; padding: 0.2em;} .programmer_ipsum {background-color: #000; color: #fff; font-family: monospace; font-weight: bold;}",
'2': "body {font-family: serif;} #heading {border: 1px solid #0f0; background-color: #afa; padding: 0.2em;} p {border: 2px solid #666; padding: 1em;} .programmer_ipsum {background-color: #00f; color: #fff; font-size: 2em; font-family: monospace; font-weight: bold;}",
'3': "body {font-family: sans-serif;} #heading {border: 1px solid #00f; background-color: #aaf; text-align: center;} p {border: 3px solid #999; padding: 0.2em;} .programmer_ipsum { background-color: #000; color: #fff; font-family: monospace; font-weight: bold;}"
};
style_tag.textContent = optional_styles[option];
}
var buttons = document.body.querySelectorAll('button');
var button_count = buttons.length;
for (var i = 0; i < button_count; i++) {
buttons[i].addEventListener('click', function(evt) {
switch_style(evt.target.value);
}, false);
}
</script>
</body>
</html>