Question

我希望在pageload上添加一个新的CSS规则，并使用Javascript（或jQuery）在窗口调整大小上修改它。我尝试了以下方法，但它似乎没有起作用：

        var w = $(window).width();
        var itemWidth = ((w/154)+4).toFixed();
        var itemWidthLeft = itemWidth/2;
        var itemWidthRight = itemWidth/2;

document.styleSheets[0].insertRule('figure.itemMargin { margin-left: '+itemWidthLeft+'; margin-right: '+itemWidthRight+'; }',0);

我做错了什么？

Answer 1

您遗失px。

document.styleSheets[0].insertRule('figure.itemMargin { margin-left: '+itemWidthLeft+'px; margin-right: '+itemWidthRight+'px; }',0);

Answer 2

你不是在字符串中包含变量，试试这个

document.styleSheets[0].insertRule('figure.itemMargin { margin-left: ' + itemWidthLeft + '; margin-right: ' + itemWidthRight + '; }',0);

Answer 3

在style中创建head元素并将规则附加到其中。例如

<style type="text/css" id="cssChanges"></style>

然后使用

$("#cssChanges").append('figure.itemMargin { margin-left: ' + itemWidthLeft + 'px; margin-right: ' + itemWidthRight + 'px; }');

使用JS添加CSS规则

3 个答案: