用Javascript插入CSS規則

我無法用Javascript插入新的CSS規則，以便將固定位置的顯示塊的寬度調整爲窗口寬度。有人能解釋爲什麼這不起作用嗎？下面是有關的jsfiddle爲HTML，CSS和Javascript（有位的jQuery一起）：http://jsfiddle.net/b9knL/這是JavaScript的問題：用Javascript插入CSS規則

$(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(); 
       }); 
});

來源

2014-04-24 AGentleRose

當您向下滾動頁面時，滾動事件會發生幾百次，並且您每次插入一個新規則，您確定已經添加了足夠的這些規則？ – adeneo

對不起，這是我用來修正頭部的舊函數的填充，我將把它改爲一個jQuery函數，該函數在窗口大小發生改變時自動啓用。 – AGentleRose

index is undefined - add var index = 0;修理。還指定寬度的px。 var selector =「header {width：」+ mywidth _ +「px;}」; – Hafthor

既然是position:fixed只需添加width:100%的CSS規則，並將其將汽車自身的調整..

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

無需腳本..

演示在http://jsfiddle.net/b9knL/2/

來源

2014-04-24 23:01:46

那麼這是一個比我預期的更簡單的答案！謝謝！ – AGentleRose

用Javascript插入CSS規則

回答

相關問題