CSS背景顏色有效期

Question

我正在動態添加一個div並向這些div添加背景色。 背景顏色值來自后端，因此為每種顏色添加了一個div ，並將其背景顏色設置為該顏色。 但是，如果出現了一些不適用於CSS背景顏色屬性的顏色，則它將顯示為白色背景。

例如“豹”色。 如果顏色不是有效的背景色，有什么方法可以驗證colous而不添加div ？

Answer 1

我絕對避免使用命名的顏色（例如紅色，白色等），而使用標准的十六進制聲明，例如：

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

這樣，您可以輕松地檢查字符串是否為有效的十六進制字符串，長度為6或3個字符。

Answer 2

列出W3規格 。

然后檢查您的顏色是否在該列表中。 這是一個例子。

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

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

Answer 3

我認為您可以重用此問題的解決方案。

它涉及一個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背景設置為白色，然后再應用后端顏色。 如果有效，它將改變。 但是，您可以根據需要使用上述腳本進行驗證。