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

【问题标题】：Javascript - check if string is valid CSS color?Javascript - 检查字符串是否是有效的 CSS 颜色？
【发布时间】：2018-07-07 04:12:00
【问题描述】：

如果颜色字符串是数字，那么我们可以使用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();
}

【问题讨论】：

你有 140 个名字w3schools.com/colors/colors_names.asp 所以检查他们所有.. 祝你好运
链接到非 jQuery 问题的 jQuery 答案，像往常一样过于复杂...
>>“这是对某人如何0努力的评论......” - 保持冷静，生活是美好的）
@dandavis 我知道，我只是回复一个说我的评论很荒谬的人（他删除了他的评论），向他展示通过一些研究我们可以找到很多方法，无论是 jQuery 还是非 jQuery ..基于此，我们至少可以尝试一下，然后如果遇到问题，我们可以发布问题。我想这就是网站的运作方式，如果没有错的话 :) 还是我们应该鼓励人们将此网站视为免费编码服务？
我只知道一种快速的方法，但还没有看到任何好的答案。这是一个简单的问题，但不是错误执行导致的问题；所以 OP 很难展示之前的工作。看看什么是投票账户是个好问题（根本没有研究）：stackoverflow.com/questions/46155/…

标签： javascript css colors

【解决方案1】：

<p class="red"></p>
<p class="yellow"></p>
<p class="white"></p>

$(funtion(){
var obj = $("p");
var ex = $(obj).eq(1);

   $("button").click(funtion(){
   alert(obj);
  });
});

这能解决问题吗？

【讨论】：

您好，扬尼克先生！否）我需要动态检查颜色“名称”是否有效 html 颜色

【解决方案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 属性值不会持续存在，我们可以将尝试设置的值与我们打算设置的值进行比较，如果它们匹配，我们就知道颜色/属性是有效的。

请注意，这也将批准十六进制、RGB 等。如果这对您的应用程序有问题，您可以使用 RegExp 或两个来筛选出这些。

【讨论】：

非常感谢！伟大的！更新了最终版本的问题
漂亮漂亮。会给它一个心眼表情符号
当您将十六进制作为参数传递时，它会将其转换为 rgb（IDK 为什么）。检查s.color 是否有值就足以知道颜色是否有效。

【解决方案3】：

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

因此，需要结合dandavis的解决方案和here给出的解决方案。

可能是这样的：

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;
  }
}

【讨论】：

rgba(47, 79, 79, 1) 怎么样？此返回false。

【解决方案4】：

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

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

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

【讨论】：

@IstvánUjj-Mészáros - Szivassam :)
请注意，此函数也为全局关键字（未设置、初始、继承）返回“真” - 这些是否应计为有效颜色可能取决于应用程序/上下文。

【解决方案5】：

输入通常与输出不正确。如果您检查值的长度，您会得到一个空字符串或 CSS2 树中的一个值

function isColor(string) {
    var s = new Option().style;
    s.color = string;
    return s.color.length > 0;
}

【讨论】：

【解决方案6】：

这是测试任何 CSS 属性值的通用解决方案：

function validCssValue(cssProp,val){
    if(cssProp == "length") return false;
    if(val == "") return true;
    var style = new Option().style;
    if(style[cssProp] != "") return false;
    style[cssProp] = val;
    return style[cssProp] !== "";
}

new Option().style 的所有属性在创建时将为空。只有有效值才会更新属性，因此无效值会将属性留空。（长度是样式对象的属性，不是 CSS 属性，所以我们需要拒绝尝试测试它。）

【讨论】：

太棒了，只是我感到困惑：如果我们传递一个空值（空字符串""），我认为这被认为是无效的 CSS 属性，不是吗？否则它将从元素样式中删除属性本身。那么，在第三行返回 false 而不是 true 是否明智？
出于我的目的，empty 是一个有效值，因为这会取消设置 css 属性。如果您的实现认为空无效，您可以将第三行更改为返回 false。

【解决方案7】：

我需要验证 CSS 颜色和所有其他属性。我发现this wonderful solution 使用内置的Web APIs 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.

【讨论】：

优秀。我认为今天这应该是最好的答案。