CSS背景颜色有效性

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

例如'豹'的颜色。如果颜色不是有效的背景颜色，有什么方法可以验证colous，而不是添加div？

2013-12-09 MJQ

你能编译一个有效的css颜色列表到一个数组中，并比较你从后端获得的颜色与该列表吗？ – Esaevian

是的，可以做！谢谢！ – MJQ

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

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

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

来源

2013-12-09 16:52:50 screenmutt

是的，这可以是一个解决方案。谢谢。 – MJQ

我绝对会避免使用命名的颜色（如红色，白色，等等。）同时使用，而不是标准六角声明，如：

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

通过这种方式，你可以很容易地检查字符串是一个有效的HEX字符串，长度为6或3个字符。

来源

2013-12-09 16:52:37 LittleSweetSeas

我没有HEX颜色的选择。但谢谢你的建议！ – MJQ

我想你可以重新使用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变量设置为你希望验证的颜色; 然后，通过jQuery将目标div的背景（在本例中为#dummy）设置为白色; 最后，目标div的背景设置为colorToTest。如果颜色仍然是白色，并且colorToTest不是白色，则后端颜色无效。

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

来源

2013-12-09 17:03:52 Vereos

是的，这也可以是一个解决方案。但我认为，如果我将颜色与有效列表进行比较，则需要添加div，否则不要添加div！在我的情况下会更好。谢谢你的建议。 upvoted！ – MJQ

嗯......默认情况下，您可以将div的“visibility”设置为“collapse”。如果颜色有效，请将其更改为“可见”。 – Vereos

CSS背景颜色有效性

回答

相关问题