时间戳

首页 > 解决方案 > 尝试在 ie 中将规则添加到样式表时出现无效参数错误

javascript - 尝试在 ie 中将规则添加到样式表时出现无效参数错误

问题描述

我正在尝试动态删除一个规则，然后在其位置添加一个新规则，以获得动态变化的 div innerHTML 的计算动画。

var ss = document.styleSheets ;           
for(j=0;j<ss[0].cssRules.length;j++)
if(ss[0].cssRules[j].name == "slide")
{  
ss[0].deleteRule(j);                              
break;
}  
ss[0].addRule('@keyframes slide', 'from {top:0px;} to {top:-300px;}', 0);

上面的代码应该删除一个 CSS 动画并插入一个新动画。问题在于“@”字符，如果我删除它代码通过，但它不是动画，因为它没有“@keyframes”标识符。我以这种方式处理此问题的原因是因为您在 ie11 的 css 中没有变量，并且您无法更改样式表 csstext！所以我想删除整个规则并插入一个新规则。我要做的就是动态更改此规则：

@keyframes slide { 
     from {top:0px;}  
     to   {top:-100px;}
}

以这条规则为例：

@keyframes slide { 
     from {top:0px;}  
     to   {top:-300px;}
}

尝试应对ie的特殊世界真是让人头疼！！谢谢你的帮助。

标签： javascriptcssinternet-explorerstylesheet

解决方案

我已经测试了您的代码并试图找出它在 IE 中不起作用的原因。但我找不到一个很好的理由。似乎您提到的 IE 无法使用 @ 读取密钥。我刚刚找到了一个解决方法是自定义一个函数来添加属性。这是我的工作演示。

CSS

<style>
    div {
        margin-top: 500px;
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        animation: mymove 5s infinite;
    }

    @keyframes mymove {
        from {
            top: 0px;
        }

        to {
            top: 200px;
        }
    }
</style>

HTML

<script>
    function insertStyleSheetRule(ruleText) {
        let sheets = document.styleSheets;
        if (sheets.length == 0) {
            let style = document.createElement('style');
            style.appendChild(document.createTextNode(""));
            document.head.appendChild(style);
        }
        let sheet = sheets[sheets.length - 1];
        sheet.insertRule(ruleText, sheet.rules ? sheet.rules.length : sheet.cssRules.length);
    }
    insertStyleSheetRule("@keyframes mymove{from {top:0px;} to {top:-300px;}}");
    insertStyleSheetRule("div {margin-top: 500px;width: 100px;height: 100px;background: red;position: relative; animation: mymove 5s infinite;- webkit - animation: mymove 5s infinite;}");
</script>

推荐阅读