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

Question

I use a transparent gradient for a text on my Anki flashcards, styled via CSS like this:

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

Since this is currently for my Anki cards only, I don't need a cross-browser solution yet.

I'd like to change the colors of the gradient with Javascript, but setting the gradient alone via

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

gives me only a gradient in that color, my text and the transparency are removed.

Do I have to set -webkit-background-clip:text and -webkit-text-fill-color: transparent again? I've tried to, but this has no effect. Or maybe I did it the wrong way.

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