JavaScript for toggling appearance I have a dedicated stylesheet &lt;style id="dynamicStyles"&gt;&lt;/style&gt; for my page's dynamic styles. They are controlled by this JavaScript:

function style(className, sty) {
    var sheet = document.getElementById('dynamicStyles').sheet;
    sheet.insertRule('.' + className + ' {' + sty + '}');
}

// No validation, do not pass tainted content.
function unstyle(className, sty) {
    var sheet = document.getElementById('dynamicStyles').sheet;
    var rules = sheet.cssRules;
    var regex = new RegExp('\\.' + className);
    for (var i = 0; i &lt; rules.length; i++) {
        if (rules[i].cssText.match(regex)) {
            sheet.deleteRule(i);
            return;
        }
    }
}

function styleRule(className, that, sty) {
    if (that.checked) {
        style(className, sty);
    } else {
        unstyle(className);
    }
}


This is called, for example, like this:

&lt;input type=checkbox onClick="styleRule('someClass', this, 'border: 1px #a00 dashed')"&gt;


There are maybe 10 or 20 inputs with similar code. The number of elements to be styled is large, hundreds or thousands, so I don't want to re-style each of them.

In addition to a general style review, I'm looking to see if there is a more elegant way to do the lookup in unstyle.
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).