css - 测试 CSS 颜色名称是否存在

Question

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

目前代码非常简单:

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

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

遍历颜色名称列表，例如 this one ，但是没有更优雅的方式吗？例如

CSS.exists("blue")
=> true

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

Answer 1

• 如果您使用 jquery 获取颜色(例如 $(...).css('background-color'))，它将返回 RGB 格式的颜色 < strong>即使没有为该元素设置颜色
• 一个 css 值只有当它是一个有效的属性时才会坚持它的属性否则:
  • 如果它有任何值，它将保持它以前的值
  • 它将包含一个空字符串(在本例中)或者可能是undefined ...

因此，如果您使用假名称更改颜色，因为它不会为该属性设置，该属性将保留以前的有效颜色(如果它有一个)，并且当您要检查时，您将检查旧的有效颜色名称不是新的无效名称。

这应该有效。用户设置颜色后调用if；

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

编辑:jsFiddle