innerHTML on a style element causing runtime error

Question

This works in FF safari and chrome but is causing an error in IE8

var styleText = "#" + containerElement.id + " button {background-color:" + options.bg_color + ";}";
    styleText += "#" + containerElement.id + " button.not-open {color:" + options.txt_color + ";}";
    styleText += "#" + containerElement.id + " button.not-open:hover {color:" + options.hvr_color + ";}";
    styleText += ".info_pane {background-color:" + options.bg_color + ";}";
    styleText += ".info_pane {color:" + options.txt_color + ";}";
    styleText += ".info_pane a {color:" + options.txt_color + ";}";
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = styleText;

the innerHTML is what is throwing the error. What would be the best alternative to making this work? I have looked around and most things i have found seem a little shaky

Answer 1

Try the cssText property instead. style.cssText = styleText;

EDIT: Evidently, that would be style.styleSheet.cssText = styleText;. My bad.

DEMO