Question

我尝试通过javascript动态添加css规则，然后在滚动事件上更新css。

这是我的代码：

var head = document.head || document.getElementsByTagName('head')[0],
        createElement = document.createElement('style');
    // append style to head
    head.appendChild(createElement); 

    // scroll event
    $(window).on('scroll touchmove', function(e) {
        // define variables 
        var body = $('body'),
            style = {
                waY: $(document).scrollTop()
            };
        // create css rules
        var css = 'body:before {';
            css += 'background-position: 0px ' + (style.waY*0.4).toFixed(2) + 'px';
            css += '}';
            css += 'body:after {';
            css += 'background-position: 0px ' + (style.waY*0.4).toFixed(2) + 'px';
            css += '}';

        createElement.innerHTML = '';
        // add css rules to style tag
        if (css.styleSheet) {
            // If IE
            createElement.styleSheet.cssText = css;
        } else {
            // Other browsers
            createElement.appendChild(document.createTextNode(css));
        } 
    });

我不喜欢这段代码，因为它会使页面过载而且运行缓慢。每次如何清除风格或仅仅超载现有规则？

如果还有其他方法可以在样式中重新加载css吗？

Answer 1

这就是您所需要的，它将在运行时更改background-position。

$(window).on('scroll touchmove', function(e) {
    var newposition = ($(document).scrollTop() * 0.4).toFixed(2);
    $('body').css('background-position', '0px ' + newposition + 'px');
});

这是example at jsFiddle。

Answer 2

我认为最好的方法就是：

创建一个数组以跟踪所有规则和样式
覆盖该数组中的某个符文
“发布”/创建具有特定ID的样式标记，并在每次需要时覆盖它

在我看来，解析样式标记的文本内容会更复杂，更慢。

将css添加到head并使用javascript动态刷新它

2 个答案: