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背景顏色有效性

回答

相關問題