javascripthtmlcsswebkitanki

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

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.

enter image description here

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.

Solution

  • I've found the solution. The problem was that I had never tried to modify vendor-prefixed CSS via Javascript before, so I did it indeed the wrong way. A correct way for this case is as follows:

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