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

【问题标题】：Add css to head and refresh it dynamically with javascript将 css 添加到 head 并使用 javascript 动态刷新它
【发布时间】：2014-02-25 08:45:08
【问题描述】：

我尝试通过 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里面的样式？

【问题讨论】：

您可以将 id 添加到该样式，然后检查具有该 id 的元素是否存在（在这种情况下，您应该覆盖它）

标签： javascript css scroll

【解决方案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。

【讨论】：

感谢您的回答，您的代码非常适用于 body animate 但我需要通过 javascript 为 body :before & :after 设置动画。它在 js 代码中不起作用，我想这样做的一种方法是将其动态添加到文档中，然后更新。也许我不对，还有其他方法

【解决方案2】：

我认为最好的方法是：

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

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

【讨论】：