Javascript 有没有办法动态更改图标的颜色?

Javascript 有没有办法动态更改图标的颜色?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个明星偶像。我想在未知数量的颜色中使用此图标 有时我需要一颗红星,有时需要一颗紫星 我可以使用web服务在服务器上动态创建图像 我想知道的是,有没有办法在不为我可能需要的每种颜色显式创建图像的情况下控制此图标的颜色?您应该使用glyphicons或其他类型的基于图标的字体: 下面是一个基于图标的字体示例:使用SVG图标,您可以随心所欲: 以下是Raphael JS库的一个示例: 我可以想出三种方法 创建具有所需所有不同颜色的精灵图纸,并移动偏移以更改颜色。这有点作弊。 使用画布动态生成图像

我有一个明星偶像。我想在未知数量的颜色中使用此图标

有时我需要一颗红星,有时需要一颗紫星

我可以使用web服务在服务器上动态创建图像


我想知道的是,有没有办法在不为我可能需要的每种颜色显式创建图像的情况下控制此图标的颜色?

您应该使用glyphicons或其他类型的基于图标的字体:


下面是一个基于图标的字体示例:

使用SVG图标,您可以随心所欲:

以下是Raphael JS库的一个示例:
我可以想出三种方法

创建具有所需所有不同颜色的精灵图纸,并移动偏移以更改颜色。这有点作弊。 使用画布动态生成图像! 使用SVG,它将响应对CSS的更改,类似于通过更改DIV/SPAN上的类来更改文本显示
如果你有一个非白色的背景,你可以生成4个星星图像:1个黑色,1个红色,1个蓝色和1个绿色,也许还有1个白色。然后将所有图像叠加,并使用它们的不透明度来获得所需的颜色。

也许您可以制作一个具有透明度的图标并更改背景颜色。使用画布对象或透明图像并更改背景颜色。为什么有人对此投反对票?我认为这是最好的解决方案。。。假设图标有回退方法,我使用的网站不明白为什么会建议使用图标。它们是精灵,这意味着,你需要为你想要的每种颜色换一个新的,而且不能动态地完成,而且只能以特定的颜色出现——所有这些都是OP要求不要的。字形图标不是基于图标的字体-它们是精灵。此外,基于图标的字体很酷,但似乎只有一组特定的图标可以使用。如果需要自定义图标怎么办?那么创建自己的图标字体?看起来很简单。只要图标是单色的,这就是获得OP想要的东西的最简单方法。@cimmanon该网站甚至不起作用。有这么多javascript错误,页面上没有加载任何内容。不是我信任的网站…链接断了。只是一个评论,而不是对迈克尔问题的回答答案或是克瑞斯隆更好