Javascript 验证css颜色名称

我已经编写了一个jQuery插件，它接受css颜色作为一些参数

我想验证它们。如果它只是一个十六进制或rgb值，我可以用正则表达式来验证它，但是如何在不使插件膨胀的情况下验证所有147个有效的颜色名称呢

我想知道是否有某种方法可以尝试应用样式（可能使用jquery），然后在无效时从浏览器中捕获错误

编辑：powtac和Pantelis提出了一个解决方案，但他们都错过了边缘案例，所以我在这里提供了一个完整的解决方案：

var validateCssColour = function(colour){
    var rgb = $('<div style="color:#28e32a">');     // Use a non standard dummy colour to ease checking for edge cases
    var valid_rgb = "rgb(40, 227, 42)";
    rgb.css("color", colour);
    if(rgb.css('color') == valid_rgb && colour != ':#28e32a' && colour.replace(/ /g,"") != valid_rgb.replace(/ /g,""))
        return false;
    else
        return true;
};

var validatecscolour=函数（颜色）{
var rgb=$（''）；//使用非标准虚拟颜色以便于检查边缘情况
var valid_rgb=“rgb（40227,42）”；
rgb.css（“颜色”，颜色）；
如果（rgb.css（'color'）==valid_rgb&&color！='：#28e32a'&&color.replace（//g，“”）！=valid_rgb.replace（//g，“”）
返回false；
其他的
返回true；
};

我认为您可以使用下面的脚本，它完全满足您的需要：您向它传递一个字符串并尝试计算颜色。好吧，这并不完全是你想要做的，但它应该会起作用

我认为在任何情况下，您都应该进行名称查找（我不认为有什么神奇的方法可以从字符串“浅蓝色”确定十六进制值），因此只需抓取其他人所做的工作即可（这个脚本是由斯托扬·斯特凡诺夫编写的，他非常擅长javascript，我从他那里读过一些好书，如果他进行查找，我想没有其他解决方案了）

功能测试（myColor）{
var valid=$（'#test'）.css（'color'）；
$（'#test'）.css（'color'，myColor）；
if（valid==$（'#test'）.css（'color'））警报（“无效颜色”）；
否则{
警报（“有效”）；
$（'测试'）.css（'颜色'，有效）；
}
}
测试（“如来”）；
测试（“白色”）；

asdasdasd

您只需将颜色设置为虚拟元素，然后检查该元素的值是否不是白色

colorToTest = 'lime'; // 'lightgray' does not work for IE

$('#dummy').css('backgroundColor', 'white');
$('#dummy').css('backgroundColor', colorToTest);
if ($('#dummy').css('backgroundColor') != 'rgb(255, 255, 255)' || colorToTest == 'white') {
    alert(colorToTest+' is valid');
}

---

当问题字符串的颜色与测试颜色相同时，此页面上发布的所有解决方案都是不正确的。当然，您可以使用一种不太可能的颜色选择，但我更愿意选择100%的成功率

OP的代码中只有一个输入错误（请参见冒号条件），并且没有测试“#28e32a”，因此颜色将失败，正则表达式将压缩颜色中的空白，因此“#28e 32a”将（错误地）通过

在普通JavaScript中，这应该100%成功：

function validTextColour(stringToTest) {
    //Alter the following conditions according to your need.
    if (stringToTest === "") { return false; }
    if (stringToTest === "inherit") { return false; }
    if (stringToTest === "transparent") { return false; }

    var image = document.createElement("img");
    image.style.color = "rgb(0, 0, 0)";
    image.style.color = stringToTest;
    if (image.style.color !== "rgb(0, 0, 0)") { return true; }
    image.style.color = "rgb(255, 255, 255)";
    image.style.color = stringToTest;
    return image.style.color !== "rgb(255, 255, 255)";
}

---

JSFiddle:

我知道这个问题已经很老了，但我提出了一个纯javascript解决方案来检查颜色，它似乎在每个浏览器中都能工作，并希望与大家分享

此函数使用浏览器将任何输入字符串转换为CSS颜色字符串（如果可能）

让我们看看基于不同输入的函数输出

无效输入 基本上，任何时候浏览器都不知道如何将输入字符串呈现为颜色，就会返回一个

空字符串

，这使得这个小函数非常适合检测无效的颜色字符串

• redd

  ，

  f0gf0g

  ，

  1234

  ，

  f00

  ，

  rgb（1,2）

  ，

  rgb（1,2,3.0）

  ，

  rgb（1,2,3,4）

  ，

  rgba（100150200）

  • …铬合金

  • …firefox

  • …internet explorer

有效输入

• aqua

  • aqua

    …chrome

  • aqua

    …firefox

  • aqua

    …internet explorer

• pink

  • rgb（255192203）

    …chrome将所有有效的html颜色名称转换为rgb格式，以下17种除外，我不确定为什么

    [“aqua”、“black”、“blue”、“fuchsia”、“gray”、“green”、“lime”、“maroon”、“navy”、“olive”、“orange”、“purple”、“red”、“silver”、“teal”、“white”、“yellow”]

  • pink

    …firefox

  • pink

    …internet explorer

• #f00

  ，

  #ff0000

  ，

  rgb（255,0,0）

  • rgb（255,0,0）

    …chrome

  • rgb（255,0,0）

    …firefox

  • rgb（255,0,0）

    …internet explorer

• rgba（255,0,0,1.0）

  ，

  rgba（255,0,0100）

  • rgb（255,0,0）

    …chrome在alpha为

    1.0

    或更大时将

    rgba

    转换为

    rgb

    ，因为它完全不透明（可能是为了性能）

  • rgb（255,0,0）

    …firefox与chrome做同样的事情

  • rgba（255,0,0,1）

    ..internet explorer将alpha参数从

    1.0

    或更高版本转换为

    1

• rgba（0255,0,0.5）

  • rgba（0255,0,0.498039）

    …chrome返回与其他浏览器不同的内容（可能以精度换取性能）

  • rgba（0255,0,0.5）

    …firefox

  • rgba（0255,0,0.5）

    …internet explorer

• rgba（0,0255,0.0）

  ，

  rgba（0,0255，-100）

  • rgba（0,0255,0）

    ..chrome将alpha参数从

    0.0

    或更低转换为

    0

  • rgba（0,0255,0）

    …firefox也这么做

  • rgba（0,0255,0）

    …internetexplorer

    function getColorCSS(c) {
        var ele = document.createElement("div");
        ele.style.color = c;
        return ele.style.color.replace(/\s+/,'').toLowerCase();
    }
    

    function isValidCssColor(c){
        // put !! to normalize to boolean
        return [
                document.head.style.color = c,
                document.head.style.color,
                document.head.style.color = null
        ][1]; // split it in 3 lines is fine, see snippet
    }
    

    v=c=>((s=document.head.style).color=c,q=s.color,s.color='',!!q);
    // v('red') => true
    // v('reeeed') => false