javascript - 检查"红色","蓝色","blabla" - 检查它的名称是否有效css颜色？

Question

如果颜色是数字,那么我们可以使用正则表达式来检查颜色是否是有效的css颜色.但言语怎么样？

我有一个动态生成控件并获取颜色的代码.但不是颜色,可能有"空",""或随机的单词.有没有办法用javascript检查颜色名称？

更新:非常感谢您的回答!:)我的最终版本是(添加到较低的检查,因为可能有"绿色","红色"等):

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

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

Answer 1

我需要验证 CSS 颜色和所有其他属性。我发现这个美妙的解决方案更短、更健壮，因为它使用内置的Web API CSS.supports()方法。

CSS.supports(propertyName, propertyValue)

CSS.supports('color','red') 
//True.
CSS.supports('color', '#007')
//True. 

CSS.supports('color', 'random')
//False. 
CSS.supports('colours', 'red')
//False. 

Answer 2

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

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属性值不会持久存在,我们可以将尝试的设置值与我们要设置的值进行比较,如果它们匹配,我们就知道颜色/属性是有效的.请注意,这也将批准hex/rgb/etc,如果这是您的应用程序的问题,您可以使用RegExp为2来筛选这些.

Answer 3

可接受的答案几乎是正确的，但是某些颜色值将在某些浏览器上转换-至少Chrome会转换十六进制RGB值#000000' torgb（0,0,0）`。

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

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

Answer 4

我正在开发一个接受颜色名称或十六进制颜色的应用程序。dandavis 的答案适用于颜色名称，但不适用于十六进制颜色。存储的值s.color (when assigning '#ff0000')是 RGB 代码（在本例中为rgb(255, 0, 0)）。因此，比较s.color == strColor返回false。

因此，您需要将 dandavis 的解决方案与此处给出的解决方案结合起来。

可能看起来像这样：

function isColor(strColor){
  var s = new Option().style;
  s.color = strColor;
  var test1 = s.color == strColor;
  var test2 = /^#[0-9A-F]{6}$/i.test(strColor);
  if(test1 == true || test2 == true){
    return true;
  } else{
    return false;
  }
}