使用 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 修改供应商前缀 CSS ，所以我确实以错误的方式进行了修改。这种情况的正确做法是：

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

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

Changing the colors of a transparent gradient for a text with Javascript

html

javascript

css

webkit

anki