Question

我在使用Javascript插入新的CSS规则时遇到问题，以便调整显示块的宽度，其位置固定为窗口的宽度。有人可以解释为什么这不起作用？以下是涉及的HTML，CSS和Javascript（以及一些jQuery）的jsfiddle：http://jsfiddle.net/b9knL/这是有问题的Javascript：

$(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

由于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/

演示

使用Javascript插入CSS规则

1 个答案: