js添加@keyframes︱更改css的辦法

以前我只知道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駝峰寫法。

Leave a Comment