JavaScript DOM 动画边框颜色

Question

I have a small problem about editing the border color of an animation.

I tried using

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

And I declared YellowBorder as :

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

I know this is wrong and for it to work it should be:

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

But if I do this, it'll just become yellow before using any JavaScript code even if I put it on a

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

Answer 1

So i found an answer using a bit of my knowledge : I had to create the style as a Javascript variable.

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

and then create a Style element :

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

Now we want that style to contain our "Yellow" inside it:

s.innerHTML = Yellow;

and Finally using this command to apply the style inside our web page :

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