使用存储在数组中的JS颜色值设置P5.js Dom元素的样式

Question

我正在P5.js中创建DOM按钮，我想对其应用样式。在这种情况下，我想要更改背景颜色。通常情况下，这将通过这样做来应用。

button.style("background-color", "black");

在我的例子中，我想引用一个已经存储在JS数组中的颜色，因为这些颜色是统一使用的，如下所示。

swatch.style("background-color", colArray[0]);

显然，这不起作用，因为样式是从CSS应用的。任何建议都是王牌。

我可以将颜色存储在CSS中并引用样式，但我正在努力避免双重处理。

JS的控制台没有错误信息。这只是一个简单的CSS问题。

Answer 1

您不能直接使用颜色值，因为它是CSS无法识别的对象，但您可以将其格式化为CSS能够识别的字符串。在p5.js中，可以使用red()、green()和blue()函数从颜色中获取RGB值。

一旦你有了这些值，我就可以想到两种方法：

方法一：在CSS中，使用rgb()函数。它看起来像这样：

var rgbString = 'rgb(' + red(myColor) + ', ' + green(myColor) + ', ' + blue(myColor) + ')';
myElement.style('background-color', rgbString);

方法二：在p5.js中，使用hex()函数将RGB值转换为十六进制。

var rHex = hex(red(myColor));
var gHex = hex(green(myColor));
var bHex = hex(blue(myColor));
var hexColor = '#' + rHex + gHex + bHex;
myElement.style('background-color', hexColor);

我没有对此进行测试，因此一些语法可能会有一些偏差，但希望这能给您一个大致的概念。