以前我只知道js如何定義元義的css，但不知道如何定義動畫用的@keyframes。
現在根據這裏的提示，我找到了js添加@keyframes的方法：
const styleEl = document.createElement('style');
document.head.appendChild(styleEl);
styleEl.sheet.insertRule("@keyframes cursor_flash { 0% { border-right: 2px solid green; } 50% { border-right: 2px solid green; } 51% { border-right: 2px solid transparent; } 100% { border-right: 2px solid transparent; }}");瀏覽器渲染機制
我們看到，這個方法原理是往<head/>內插入一個style標籤。那麼問題來了，如果頁面已經全部加載完成之後才添加，這個代碼還有效嗎？
經測試，不管是window.onload添加，還是某button.onclick添加，都可以實時産生效果。原因可能是，瀏覽器是實時監測css變化來渲染畫面的。
其它更改style的辦法
以width為例，更改style可以有以下幾種辦法：
this.style.width = "240px";
this.style.setProperty('width', '360px');
Object.assign(this.style, {"width": "480px"})這幾種方法都是針對某個元素的style，所以都不能用來添加@keyframes。
這幾種方法，其實還稍有點不同，請看更改font-size的例子：
this.style.fontSize = "24px";
this.style.setProperty('font-size', '36px');
Object.assign(this.style, {"fontSize": "48px"})setProperty可以寫成跟css一樣樣的，而另兩個要轉成Object駝峰寫法。
三種方法各有千秋：第一種寫法最簡單，第二種可以直接複製css寫法，第三種可以塞進多條樣式。