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

时间:2019-09-28 09:33:54

标签: javascript css processing p5.js

我正在P5.js中创建要应用样式的DOM按钮。在这种情况下,我想更改背景颜色。通常,这将通过执行此操作来应用。

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

在我的情况下,我想引用已经存储在JS数组中的一种颜色,因为这种颜色被统一使用。

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

显然这是行不通的,因为样式是从CSS应用的。任何建议都是王牌。

我可以将颜色存储在CSS中并引用样式,但是我试图避免双重处理。

JS控制台中没有错误消息。只是一个普通的CSS问题。

1 个答案:

答案 0 :(得分:1)

您不能直接使用color值,因为它是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);

我尚未对此进行测试,因此某些语法可能会略有不同,但希望可以为您提供总体思路。