JavaScript DOM 动画边框颜色

Question

我有一个关于编辑动画边框颜色的小问题。

我尝试使用

document.getElementById("ID").style.animationName = "YellowBorder";

我宣布 YellowBorder 为：

<style>
YellowBorder {
   @keyframes animate-border {
                              0% {border-color: #000000;}
                              100% {border-color: #FFFF00;}
                             }
             }
</style>

我知道这是错误的，它应该是：

    <style>
   @keyframes animate-border {
                              0% {border-color: #000000;}
                              100% {border-color: #FFFF00;}
                             }
   </style>

但是如果我这样做，它会在使用任何 JavaScript 代码之前变成黄色，即使我把它放在

<script> If (condition) { <style> **HERE** </style> } </script>

Answer 1

所以我使用我的一些知识找到了一个答案：我必须将样式创建为 Javascript 变量。

var Yellow = "@keyframes animate-border{ 0%{border-color: #000000;} 100%{border-color: #FFFF00;} }";

然后创建一个 Style 元素：

var s = document.createElement("style");

现在我们希望该样式在其中包含我们的“黄色”：

s.innerHTML = Yellow;

最后使用此命令在我们的网页中应用样式：

document.getElementsByTagName("head")[0].appendChild(s);