JavaScript for toggling appearance
Moar built-ins... MOAR (and a look-up table)!

It is great that you are using the built-in insertRule method for style sheets here:


sheet.insertRule('.' + className + ' {' + sty + '}');



It is not great that you aren't using the built in deleteRule for style sheets here:


function unstyle(className, sty) {



Reading the docs, it says that the deleteRule method accepts an index. This index comes from the second parameter of insertRule which you are currently not using. That means all you need to do is start keeping track of the indexes.

In order to keep track of the indexes, class names, and CSS rules, simply create a look up table and use a counter for the indexes:

var ruleToIndexTable = {};
var indexCounter = 0;


Now, when you are styling a rule, simply add it to the table:

indexCounter++;
ruleToIndexTable[rule] = indexCounter;


Note that this will require you to compute the rule somehow, which are technically already doing in the earlier part of the style function:


sheet.insertRule('.' + className + ' {' + sty + '}');



We'll be using this logic again later, so it'll be best to extract this into it's own function computeRule(className, sty) and have both your style and unstyle functions take the single rule as a parameter.

Then later, in your unstyle function, you can simply use the lookup table to find out which table to delete:

function unstyle(rule) {
    sheet.removeRule(ruleToIndexTable[rule]);
}


This assumes that unstyle can access sheet, too, which it now should be able to so you don't have to get the sheet element over and over again (which is inefficient).

With these changes, your code is much more efficient now. With the addition of this look-up table and the new use of the removeRule function, your code now runs in \$O(1)\$ time (I think).