fetch CSS rules in javascript/jquery

i want the rules of css to be fetched and displayed in drop down for this i am doing..

var opnr = window.opener ; 
function getStyle() { 
    var selCss=opnr.document.getElementById("CSS");
    loadjscssfile("css/"+selCss.value,"css");
    var cssRef = document.styleSheets[0];
    cssRef.href ='css/'+ selCss.value;
    var classes = cssRef.rules || cssRef.cssRules ;
    var select = document.getElementById('stylefieldid');//document.createElement('select');

    for(var x=0;x<classes.length;x++) { 
       var option = document.createElement('option');
       var className = classes[x].selectorText;
       if(className.startsWith('.')){
           className = className.substring(1,className.length);
       }
          option.text = className;
          option.value = className;
       select.add(option);
    } 
} 


function loadjscssfile(filename, filetype){
    var fileref; 
    if (filetype=="js")
    {
        fileref=document.createElement("script");
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filename);
    } 
    else if (filetype=="css"){
        fileref=document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    } 
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref);
}

but this is showing abrupt behaviour the variable classes comes to be undefined sometimes while it has value sometimes... i tried alerting cssRef.href it gives me correct value..

the code is not at all working on FF any work around

Any help on this?? why its happening like this

any alternative in jquery????