JavaScriptで動的にスタイルシートを作成する

以前、JavaScriptで他のアプリケーションで作成されたテキストデータの中身を表示する際に、動的にスタイルシートを生成する機会があったので、その時に書いたコードを元に実装コードの例とデモを載せます。
今回の実装では、ランダムでデータを作成し文字色もランダムという設定で実装しています。

$(function(){
    // 動的に設定するスタイルシートの作成
    $('head').append('<style id="randomStyle">');
    var buttonEvent = function(){
        // スタイルのリセット
        $('#randomStyle').empty();
        $('#result').empty();

        /*
          document内のスタイルシートの取得と適当な長さの配列作成
          randomArrayは実データを元にする場合はそのデータの取得を行う
        */
        var styleSheets = document.styleSheets,
            randomArray = new Array(getRandNum(10, 'ceil'));
        // 0で埋める
        randomArray.fill(0, 0);
        /*
          データ1つ1つのスタイル設定を行う
          実データの場合、これはデータの種類ごとに処理することになると思われる
        */
        randomArray.forEach(
            function(cell, index, array){
                /*
                  RGBカラーコードの設定
                  実データの場合、スタイル情報はデータと異なる場所に設定があると思われる
                */                
                var colorCode = [getRandNum(255),getRandNum(255),getRandNum(255)].join();
                $('#result').append('<p class="type-'+index+'">'+index+'番目の要素</p>');
                // 動的なスタイルシートにルールを追加
                this.insertRule('.type-'+ index + '{ color:rgb(' + colorCode + ');}', this.cssRules.length);
            }, styleSheets[styleSheets.length - 1]
        );
    };

    var getRandNum = function(max, type){
        switch(type){
            case 'ceil' :
                return Math.ceil(Math.random() * max);
                break;
            default:
                return Math.round(Math.random() * max);
        }

    }

    $('#random-Button').on(
        'click',
        buttonEvent
    );
});

/*
  Array.prototype.fill() Array.prototypeの Polyfill は省略
*/

上記のコードでも示しましたが、実データを読み込んでブラウザで表示する場合では以下の点が相違となると思われます。

• 表示するデータはデータ内にスタイルを記録した場所がファイル内にあると思われるためそれをスタイル設定に使用
• データ1つごとのスタイル設定ではなくデータの種類ごとにスタイルを設定が必要

スタイル設定をする場合の注意点としては、CSSで使用するプロパティ名とDOMで使用するCSSのプロパティ名が異なる（例:CSSのfloatはDOMではcssFloatとなる）ため、CSS Properties Referenceなどを見ながら設定をしないと動作しなくなる可能性が高いです。