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);