我正在P5.js中创建要应用样式的DOM按钮。在这种情况下,我想更改背景颜色。通常,这将通过执行此操作来应用。
button.style("background-color", "black");
在我的情况下,我想引用已经存储在JS数组中的一种颜色,因为这种颜色被统一使用。
swatch.style("background-color", colArray[0]);
显然这是行不通的,因为样式是从CSS应用的。任何建议都是王牌。
我可以将颜色存储在CSS中并引用样式,但是我试图避免双重处理。
JS控制台中没有错误消息。只是一个普通的CSS问题。
答案 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);
我尚未对此进行测试,因此某些语法可能会略有不同,但希望可以为您提供总体思路。