Question

我有一个应用程序，用户可以输入颜色名称，比如说blue，一旦他/她这样做，div就会变成那种颜色。

目前代码非常简单：

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

是否可以检查特定颜色是否存在？目前我只能想到一个解决方案：

循环显示颜色名称列表，例如this one，但是不是更优雅的方式吗？ E.g

CSS.exists("blue")
=> true

另外，我不希望用户输入颜色十六进制。

Answer 1

这应该有效。在用户设置颜色后调用;

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

编辑：jsFiddle

Answer 2

Color gem/Color::CSS就是你想要的：

如果名称无效，则返回name的RGB颜色或nil。

Answer 3

从您的问题来看，您似乎想要检查服务器本身。但是，识别颜色是浏览器特定的行为，因此需要往返浏览器。

以下是一种方式。我有兴趣看看有人有更优雅的东西。我们假设您正在使用jquery。

在你的html中放一个'test'div。 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;
    }
}

我们依赖于浏览器如果无法识别它就会忽略颜色值这一事实。

测试是否存在CSS颜色名称

3 个答案: