therealkevinard · July 2, 2017 22:33
diff --git a/demo_loadatruntime_assets_css_main.css b/demo_loadatruntime_assets_css_main.css
 h1, h2, h3, h4, h5, h6 {
 	color: red !important;
 }
diff --git a/demo_loadatruntime_assets_css_other-main.css b/demo_loadatruntime_assets_css_other-main.css
 h1, h2, h3, h4, h5, h6 {
    color: green !important;
 }
diff --git a/demo_loadatruntime_assets_js_load.js b/demo_loadatruntime_assets_js_load.js
 var $ = document; // shortcut
 var user_cssnodeid = 'usercss';
 var custom_csspath = '/assets/css/other-main.css';
 var current_usercss = '';
 var new_usercss = '';

 function toggleCss() {
    //-- ternary: basically a condensed if\else. If current is custom, set new to default. If it's not, set new to custom
    new_usercss = current_usercss === custom_csspath ? '' : custom_csspath;
    if (!$.getElementById(user_cssnodeid)) {
        //-- the link element isn't there, so we'll need to create it first.
        addNewCss();
    }
    else {
        //-- the element is already there, so we just need to set it's src.
        resetCss();
    }

    //-- we're done resetting css sheets. assign current to new.
    // you *could* reuse the new_usercss string here, but - for stability's sake - we're reading the href from what's *actually* there now.
    current_usercss = $.getElementById(user_cssnodeid).getAttribute('href');
 }

 /**
 * Creates a new link element, sets its params according to what we want, add appends it to the document head
 */
 function addNewCss() {
    var head = $.getElementsByTagName('head')[0];
    //-- using the dom api to create a link element
    var link = $.createElement('link');
    link.id = user_cssnodeid;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = new_usercss;
    link.media = 'all';
    head.appendChild(link);
 }

 /**
 * since the element with our target id is there, we don't need to create it. Simply select it and set its href attribute.
 */
 function resetCss() {
    var link = $.getElementById(user_cssnodeid);
    link.href = new_usercss;
    link.media = 'all';
 }
diff --git a/demo_loadatruntime_index.html b/demo_loadatruntime_index.html
 <!DOCTYPE HTML>
 <html>
 <head>
    <meta charset="utf-8"/>
    <script src="assets/js/ie/html5shiv.js"></script><![endif]-->
    <link rel="stylesheet" id="maincss" href="assets/css/main.css"/>
    <link rel="stylesheet" id="usercss" href="">
 </head>
 <body>

 <h1>My Header</h1>

 <div class="clickme">
    <button onclick="toggleCss()" style="position: fixed; bottom: 0; left: 0; right: 0;">Switch</button>
 </div>
 <script src="assets/js/load.js"></script>
 </body>
 </html>
diff --git a/demo_loadatruntime_package.json b/demo_loadatruntime_package.json
 {
  "dependencies": {
    "express": "^4.15.3"
  }
 }
diff --git a/demo_loadatruntime_srv.js b/demo_loadatruntime_srv.js
 const express = require('express')
 const app = express()

 app.use(express.static(__dirname));

 app.listen(3000, function () {
    console.log('App listening on port 3000!')
 })
	var $ = document; // shortcut
	var user_cssnodeid = 'usercss';
	var custom_csspath = '/assets/css/other-main.css';
	var current_usercss = '';
	var new_usercss = '';

	function toggleCss() {
	//-- ternary: basically a condensed if\else. If current is custom, set new to default. If it's not, set new to custom
	new_usercss = current_usercss === custom_csspath ? '' : custom_csspath;
	if (!$.getElementById(user_cssnodeid)) {
	//-- the link element isn't there, so we'll need to create it first.
	addNewCss();
	}
	else {
	//-- the element is already there, so we just need to set it's src.
	resetCss();
	}

	//-- we're done resetting css sheets. assign current to new.
	// you could reuse the new_usercss string here, but - for stability's sake - we're reading the href from what's actually there now.
	current_usercss = $.getElementById(user_cssnodeid).getAttribute('href');
	}

	/**
	* Creates a new link element, sets its params according to what we want, add appends it to the document head
	*/
	function addNewCss() {
	var head = $.getElementsByTagName('head')[0];
	//-- using the dom api to create a link element
	var link = $.createElement('link');
	link.id = user_cssnodeid;
	link.rel = 'stylesheet';
	link.type = 'text/css';
	link.href = new_usercss;
	link.media = 'all';
	head.appendChild(link);
	}

	/**
	* since the element with our target id is there, we don't need to create it. Simply select it and set its href attribute.
	*/
	function resetCss() {
	var link = $.getElementById(user_cssnodeid);
	link.href = new_usercss;
	link.media = 'all';
	}
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8"/>
	<script src="assets/js/ie/html5shiv.js"></script><![endif]-->
	<link rel="stylesheet" id="maincss" href="assets/css/main.css"/>
	<link rel="stylesheet" id="usercss" href="">
	</head>
	<body>

	<h1>My Header</h1>

	<div class="clickme">
	<button onclick="toggleCss()" style="position: fixed; bottom: 0; left: 0; right: 0;">Switch</button>
	</div>
	<script src="assets/js/load.js"></script>
	</body>
	</html>
	const express = require('express')
	const app = express()

	app.use(express.static(__dirname));

	app.listen(3000, function () {
	console.log('App listening on port 3000!')
	})