Inserting a CSS Rule with Javascript

Question

I'm having trouble inserting a new CSS rule with Javascript in order to adjust the width of a display block with a fixed position to the width of the window. Could someone explain why this isn't working? Here's the jsfiddle for the HTML, CSS, and Javascript (along with a bit of jQuery) involved: http://jsfiddle.net/b9knL/ and this is the Javascript in question:

$(function () {
                function change_header(){ 
                     var sheets = document.styleSheets;
                     var sheet = document.styleSheets[0];
                     var mywidth = $(window).width();
                     var selector = "header{ width: "+mywidth+"; }";
                     sheet.insertRule(selector, index);
                }
                change_header();

                $(window).resize(function() {
                        change_header();
                });
});

Answer 1

Since it is position:fixed just add width:100% to the css rule and it will auto adjust on its own..

header{
    background-color: #005e00;
    display: block;
    position: fixed;
    z-index: 500;
    width:100%;
    box-shadow: 0px 5px 5px #888888;
}

no need for scripting..

Demo at http://jsfiddle.net/b9knL/2/