Я получаю ошибку неверного аргумента при попытке добавить правку в таблицу стилей в ie - PullRequest
Новая
       19

Я получаю ошибку неверного аргумента при попытке добавить правку в таблицу стилей в ie

2 голосов
/ 11 апреля 2019

Я пытаюсь динамически удалить правило, а затем добавить новое вместо него, чтобы получить вычисленную анимацию для динамически изменяемого 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. Причина, по которой я так поступаю, заключается в том, что у вас нет переменных в css для ie11, и вы не можете изменить csstext таблицы стилей! Поэтому я подумал удалить целое правило и вставить новое. Все, что я пытаюсь сделать, это динамически изменить это правило: 

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

К этому правилу, например: 

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

Это действительно боль в шее, пытаться иметь дело с особым миром, т. Е. !! Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 12 апреля 2019

Я проверил ваш код и попытался выяснить, почему он не работает в 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>
...