Kiểm tra xem tên màu CSS có tồn tại không

Question

Tôi có một ứng dụng mà người dùng có thể nhập tên màu, giả sử blue, khi người đó đã thực hiện điều đó, một div sẽ chuyển thành màu đó.

Mã này là khá đơn giản vào lúc này:

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

Có thể kiểm tra hay không màu đó tồn tại? Hiện tại tôi chỉ có thể nghĩ ra một giải pháp:

Lặp qua danh sách tên màu, như this one, nhưng không có cách nào thanh lịch hơn? Ví dụ:

CSS.exists("blue") 
=> true 

Ngoài ra, tôi không muốn người dùng nhập hex màu.

Answer 1

Các Color gem/Color::CSS là những gì bạn muốn:

Trả về màu RGB cho tên hoặc nil nếu tên không hợp lệ.

Answer 2

Điều này sẽ hiệu quả. Gọi nếu sau khi người dùng đặt màu;

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

EDIT: jsFiddle

Answer 3

Từ câu hỏi của bạn, có vẻ như bạn muốn tự mình kiểm tra máy chủ. Tuy nhiên, việc nhận biết màu sắc là hành vi cụ thể của trình duyệt và do đó cần có một chuyến đi khứ hồi tới trình duyệt.

Sau đây là một cách. Tôi sẽ quan tâm đến việc xem ai đó có cái gì đó thanh lịch hơn không. Chúng tôi giả sử bạn đang sử dụng jquery.

Đặt div 'thử nghiệm' trong html của bạn. 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; 
    } 
} 

Chúng tôi dựa trên thực tế là trình duyệt sẽ chỉ đơn giản là bỏ qua một giá trị màu nếu nó không thể nhận ra nó.