Set page CSS dynamically

by nathanlogan

HTML

<div>
  <p>
    Something goes here.
  </p>
</div>

JavaScript

// from https://davidwalsh.name/add-rules-stylesheets

function addCSSRule(sheet, selector, rules, index) {
	if ("insertRule" in sheet) {
		sheet.insertRule(selector + "{" + rules + "}", index);
	}
	else if ("addRule" in sheet) {
		sheet.addRule(selector, rules, index);
	}
}

const newSheet = (function() {
	var style = document.createElement("style")

	// WebKit hack :(
	style.appendChild(document.createTextNode(""))

	// Add the <style> element to the page
	document.head.appendChild(style)

	return style.sheet
})()

// example of 1 rule at a time
addCSSRule(newSheet, "div", "padding: 10px;")
addCSSRule(newSheet, "div", "background: pink;")
addCSSRule(newSheet, "div", "border: 4px solid purple;")

// example of n rules at a time
addCSSRule(newSheet, "p", "color: #fff; font-weight: bold; font-size: 22px; font-family: sans-serif;")