Javascript - 检查字符串是否是有效的 CSS 颜色？

Question

如果颜色字符串是一个数字，那么我们可以使用 RegExp 来检查它是否是有效的 CSS 颜色。但如果是一个词呢？

我有从颜色参数动态生成控件的代码。但是除了颜色，可能还有 null 、 "" 或随机词。有没有办法用 Javascript 检查颜色名称？

更新： 非常感谢您的精彩回答！ :) 我的最终版本如下（添加了 toLowerCase() 检查，因为颜色可能是 "Green" ， "Red" 等）。

 function isValidColor(strColor) {
  var s = new Option().style;
  s.color = strColor;

  // return 'false' if color wasn't assigned
  return s.color == strColor.toLowerCase();
}

原文由 Gennady G 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个简单的函数，用于检查当前浏览器对颜色名称的支持：

 function isColor(strColor){
  var s = new Option().style;
  s.color = strColor;
  return s.color == strColor;
}

// try it out
isColor("red");   // true
isColor("reds");  // false

由于无效的 CSS 属性值不会持续存在，我们可以将尝试设置的值与我们打算设置的值进行比较，如果它们匹配，我们就知道颜色/属性是有效的。

请注意，这也将批准十六进制、RGB 等。您可以使用 RegExp 筛选掉它们，如果这对您的应用程序来说是个问题，则可以使用两个。

原文由 dandavis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

接受的答案几乎是正确的，但某些颜色值会在某些浏览器上转换——至少 Chrome 会将十六进制 RGB 值 #000000 转换为 rgb(0, 0, 0) 。

但是，如果将 style.color 设置为无效值，检查时将得到一个空字符串：

 const isColor = (strColor) => {
  const s = new Option().style;
  s.color = strColor;
  return s.color !== '';
}

As Mr Smith not4ed in the comments, the above also returns true for the keywords unset , initial , inherit .这些是否应该算作有效颜色可能取决于应用程序/上下文”

原文由 Lee Goddard 发布，翻译遵循 CC BY-SA 4.0 许可协议