javascript - 使用 Javascript 更改文本的透明渐变颜色

Question

我在 Anki 抽认卡上为文本使用透明渐变，通过 CSS 设置样式如下:

background: -webkit-linear-gradient(-45deg, #cccccc, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

因为这目前仅适用于我的 Anki 卡片，所以我还不需要跨浏览器解决方案。

我想用 Javascript 改变渐变的颜色，但是通过单独设置渐变

document.getElementById("ID_of_Text").style.background=
"-webkit-linear-gradient(-45deg, #000000, #ffffff)"

只给我该颜色的渐变，我的文本和透明度都被删除了。

我必须再次设置 -webkit-background-clip:text 和 -webkit-text-fill-color: transparent 吗？我试过了，但这没有效果。或者我做错了。

Answer 1

我找到了解决方案。问题是我以前从未尝试过通过 Javascript 修改带有 vendor 前缀的 CSS，所以我确实是用错了方法。这种情况的正确做法如下:

document.getElementById("ID_of_Text").style["-webkit-background-clip"] = "text";
document.getElementById("ID_of_Text").style["-webkit-text-fill-color"] = "transparent";