用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规则

回答

相关问题