測試是否存在CSS顏色名稱

Question

我有一個應用程序，用戶可以在其中輸入顏色名稱，如blue，一旦他/她已完成該操作，div將變爲該顏色。

代碼此刻很簡單：

<div class="colorBox" style="background-color: <%= color.name %>;"> 
</div> 

是否可以檢查特定的顏色是否存在？ 目前我只能想到一種解決方案：

循環顯示顏色名稱列表，如this one，但是沒有更優雅的方式嗎？例如

CSS.exists("blue") 
=> true 

此外，我不希望用戶輸入顏色十六進制。

Answer 1

的Color gem/Color::CSS是你想要什麼：

返回名稱或零RGB顏色如果名稱是無效的。

Answer 2

這應該工作。在用戶設置顏色後調用;

function isColorValid(element, value) { 
    return element && element.style.backgroundColor === val; 
} 

編輯：jsFiddle

Answer 3

從你的問題看來，你想檢查服務器本身。但是，顏色的識別是瀏覽器特定的行爲，因此需要往返瀏覽器。

以下是一種方法。我會很高興看到有人有更優雅的東西。我們假設你正在使用jQuery。

把'test'div放到你的html中。 HTML：

<div id="test"></div> 

JS：

function color_exists(color) { 
    if (color == 'white') { 
     return true; 
    } 
    $('#test').css('backgroundColor', color); 
    if ($('#test').css('backgroundColor') == color) { 
     return true; 
    } else { 
     return false; 
    } 
} 

我們依靠的事實，瀏覽器將簡單地忽略顏色值，如果它不能識別它。