javascript - 使用存储在数组中的 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);

我还没有对此进行测试，因此某些语法可能略有偏差，但希望这能让您大致了解。