Question

我动态添加div并为这些div添加背景颜色。背景颜色值来自后端，因此每种颜色添加一个div，并将其背景颜色设置为该颜色。但是，如果某些对CSS背景颜色属性无效的颜色出现，则显示为白色背景。

例如'Leopard'颜色。有没有办法验证colous，如果颜色不是有效的背景颜色，则不添加div？

Answer 1

我绝对不会使用命名颜色（例如红色，白色等），而是使用标准的十六进制声明，例如：

#FF0000 = #F00 = red
#000000 = #000 = black
#ffffff = #fff = white
#ac25B1 = some other *unnamed* colour

这样，您可以轻松检查字符串是否为6或3个字符长的有效HEX字符串。

Answer 2

从W3 Specifications制作一个列表。

然后检查您的颜色是否在该列表中。这是一个例子。

colors = ['lime', 'orange', 'pink'];

if (colors.indexOf(the_color) >= 0) {
    // Set background
}

Answer 3

我认为您可以重复使用this question的解决方案。

它涉及一个jQuery脚本，用于检查提交的颜色是否真的产生RGB值。我正在复制它。

colorToTest = 'lime'; // 'lightgray' does not work for IE

$('#dummy').css('backgroundColor', 'white');
$('#dummy').css('backgroundColor', colorToTest);
if ($('#dummy').css('backgroundColor') != 'rgb(255, 255, 255)' || colorToTest == 'white') {
    alert(colorToTest+' is valid');
}

以下是它的工作原理：首先，colorToTest变量设置为您要验证的颜色; 然后，目标div的背景（在这种情况下为#dummy）通过jQuery设置为白色; 最后，目标div的背景设置为colorToTest。如果颜色仍然是白色，并且colorToTest不是白色，则后端颜色无效。

但是，由于无效颜色不会产生任何布局，您可以将div背景设置为白色，然后应用后端颜色。如果它是vaild，它会改变。但是，如果您愿意，可以使用上面的脚本进行验证。

CSS背景颜色有效性

3 个答案: