问题描述：

我写了一个jQuery插件，它接受一些参数的css颜色。验证CSS颜色名称

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

我想知道是否有某种方法试图应用样式（可能与jQuery），然后从浏览器捕获错误，如果它是无效的？

编辑：powtac和潘泰利斯想出了一个解决方案，但他们都错过了边缘的情况下，所以我在这里，包括一个完整的解决方案：

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

非常有趣的问题。我喜欢。 – Patricia 2011-06-17 13:03:33

我以为只有17个（数橙色）？ – kennebec 2011-06-17 13:17:38

@kennebec：看到http://www.w3schools.com/css/css_colornames.asp – SystemicPlural 2011-06-17 13:42:38

答

当所讨论的字符串与测试颜色相同时，所有发布在此页面上的解决方案都不正确。当然，你可以使用一种非常不可能的颜色选择，但我宁愿去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：http://jsfiddle.net/WK_of_Angmar/xgA5C/

答

我想你可以使用脚本从这个page，做正是你想要的：你传递一个字符串，并试图找出颜色。好吧，这不完全是你想要做的，但它应该工作。

我认为在任何情况下，在某些时候你应该做一个名称查找（我不认为有一些神奇的方式来确定字符串“淡蓝色”的十六进制值），所以只需要抓取一些工作其他人已经完成了（脚本是由斯托扬Stefanov，这是非常好的JavaScript，我已经阅读了他的一些好书，如果他做了查找，以及我不认为有另一种解决方案）

答

在这里， http://jsfiddle.net/vSXNK/

它匆匆写成，但它的工作原理。

失败的黑色......但你可以检查：`if（color ==“black”）OK else validation_code` – BrunoLM 2011-06-17 13:11:57

答

您可以简单地将颜色设置为虚拟元素，然后检查元素的值是否为白色以外的值。

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

答

我知道这个问题是相当老了，但我想出了一个纯JavaScript解决方案检查颜色这似乎在每一个浏览器工作，并希望分享它

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

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

让我们来看看基于不同的输入功能输出...

无效输入

基本上随时随地浏览器无法弄清楚如何使输入字符串作为颜色返回empty string这使得这个小功能完善的用于检测无效颜色字符串！

redd，#f0gf0g，#1234，f00，rgb(1,2)，rgb(1,2,3.0)，rgb(1,2,3,4)，rgba(100,150,200)
- 。。。 chrome
- 。。。 firefox
- 。。。 的Internet Explorer

有效输入

aqua
- aqua。。。 chrome
- aqua。。。 firefox
- aqua。。。 的Internet Explorer

pink
- rgb(255,192,203)。。。 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,0,100)
- rgb(255,0,0)。。。铬转换rgba到rgb随时alpha是1.0或更大，因为它是完全不透明反正（可能是性能）
- rgb(255,0,0)。。。 firefox做的和铬相同
- rgba(255,0,0,1)。。。 的Internet Explorer从1.0或更大的α-PARAM转换为1

rgba(0,255,0,0.5)
- rgba(0,255,0,0.498039)。。。 chrome返回与其他浏览器不同的东西（可能是交易的准确性）
- rgba(0,255,0,0.5)。。。 firefox
- rgba(0,255,0,0.5)。。。 的Internet Explorer

rgba(0,0,255,0.0)，rgba(0,0,255,-100)
- rgba(0,0,255,0)。。。chrome将alpha参数从0.0或更低转换为0
- rgba(0,0,255,0)。。。 firefox也一样
- rgba(0,0,255,0)。。。 的Internet Explorer做同样的

rgba(0,0,0,0)，rgba(0,0,0,-100)
- rgba(0,0,0,0)。。。 chrome
- transparent。。。火狐只有这一个rgba实例与
- rgba(0,0,0,0)设置为0这个词transparent（怪）所有参数转换。。。 的Internet Explorer

hsl(180,50%,50%)
- rgb(63,191,191)。。。 chrome
- ff rgb(63,191,191)。。。 firefox
- ie hsl(180,50%,50%)。。。 的Internet Explorer

hsl(x,x,0%)
- rgb(0,0,0)。。。 chrome
- rgb(0,0,0)。。。 firefox
- hsl(0,0%,0%)。。。的Internet Explorer的black任何HSL表示转换到这个

hsl(x,x,100%)
- rgb(255,255,255)。。。 chrome
- rgb(255,255,255)。。。 firefox
- hsl(0,0%,100%)。。。 的Internet Explorer的white任何HSL表示转换到这个

hsla(180,50%,50%,1.0)，hsla(180,50%,50%,100)
- rgba(63,191,191,1)。。。 chrome
- rgba(63,191,191,1)。。。 firefox
- hsla(180,50%,50%,1)。。。 的Internet Explorer

hsla(180,50%,50%,0.5)
- rgba(63,191,191,0.498039)。。。 chrome
- rgba(63,191,191,0.5)。。。 firefox
- hsla(180,50%,50%,0.5)。。。 的Internet Explorer

hsla(0,0%,0%,0.0)，hsla(0,0%,0%,-100)
- rgba(0,0,0,0)。。。 chrome
- transparent。。。firefox是一致的，但这种转换仍然看起来很奇怪
- hsla(180,50%,50%,0)。。。 的Internet Explorer

哇，我简直不敢相信我刚刚花了2个小时的测试该功能在不同的浏览器！

我想我可以使用功能以及演示，而我在这...

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

 
function isColorValid(c) { 
 
\t var s = getColorCSS(c); 
 
\t return (s) ? true : false; 
 
} 
 

 
function isColorTransparent(c) { 
 
\t var s = getColorCSS(c); 
 
\t return (
 
\t \t s === "transparent" || 
 
\t \t s.substring(0,4) === "rgba" && +s.replace(/^.*,(.+)\)/,'$1') <= 0 || 
 
\t \t s.substring(0,4) === "hsla" && +s.replace(/^.*,(.+)\)/,'$1') <= 0 
 
\t); 
 
} 
 

 
function isColorWhite(c) { 
 
\t var s = getColorCSS(c); 
 
\t return [ 
 
\t \t "white", 
 
\t \t "rgb(255,255,255)", 
 
\t \t "rgba(255,255,255,1)", 
 
\t \t "hsl(0,0%,100%)", 
 
\t \t "hsla(0,0%,100%,1)" 
 
\t ].indexOf(s) > -1; 
 
} 
 

 
function isColorBlack(c) { 
 
\t var s = getColorCSS(c); 
 
\t return [ 
 
\t \t "black", 
 
\t \t "rgb(0,0,0)", 
 
\t \t "rgba(0,0,0,1)", 
 
\t \t "hsl(0,0%,0%)", 
 
\t \t "hsla(0,0%,0%,1)" 
 
\t ].indexOf(s) > -1; 
 
} 
 

 
function checkColorString() { 
 
    var c = document.getElementById("c").value; 
 
    
 
    if (c === "") { 
 
    document.getElementsByTagName("body")[0].style.backgroundColor = 'transparent'; 
 
    document.getElementById("result").innerHTML = ''; 
 
    } 
 
    else if (isColorValid(c)) { 
 
    if (isColorTransparent(c)) { 
 
     document.getElementsByTagName("body")[0].style.backgroundColor = 'transparent'; 
 
     document.getElementById("result").innerHTML = '<span style="color:#dadada;">TRANSPARENT</span>'; 
 
    } 
 
    else if (isColorWhite(c)) { 
 
     document.getElementsByTagName("body")[0].style.backgroundColor = getColorCSS(c); 
 
     document.getElementById("result").innerHTML = '<span style="color:black;">WHITE</span>'; 
 
    } 
 
    else if (isColorBlack(c)) { 
 
     document.getElementsByTagName("body")[0].style.backgroundColor = getColorCSS(c); 
 
     document.getElementById("result").innerHTML = '<span style="color:white;">BLACK</span>'; 
 
    } 
 
    else { 
 
     document.getElementsByTagName("body")[0].style.backgroundColor = getColorCSS(c); 
 
     document.getElementById("result").innerHTML = getColorCSS(c); 
 
    } 
 
    } 
 
    else { 
 
    document.getElementsByTagName("body")[0].style.backgroundColor = 'transparent'; 
 
    document.getElementById("result").innerHTML = '<span style="font-size:42px;color:#dadada;">&#9785</span>'; 
 
    } 
 
} 
 

 
var eventList = ["change", "keyup", "paste", "input", "propertychange"]; 
 
for(event of eventList) { 
 
    document.getElementById("c").addEventListener(event, function() { 
 
     checkColorString(); 
 
    }); 
 
}

#c { 
 
    width: 300px; 
 
    padding: 6px; 
 
    font-family: courier; 
 
} 
 

 
#result { 
 
    font-family: courier; 
 
    font-size: 24px; 
 
    padding: 12px 6px; 
 
}

<input id="c" placeholder="Enter any valid CSS color..."></input> 
 
<div id="result"></div>

验证CSS颜色名称

无效输入

`redd`，`#f0gf0g`，`#1234`，`f00`，`rgb(1,2)`，`rgb(1,2,3.0)`，`rgb(1,2,3,4)`，`rgba(100,150,200)`

有效输入

`aqua`

`pink`

`#f00`，`#ff0000`，`rgb(255,0,0)`

`rgba(255,0,0,1.0)`，`rgba(255,0,0,100)`

`rgba(0,0,255,0.0)`，`rgba(0,0,255,-100)`

`rgba(0,0,0,0)`，`rgba(0,0,0,-100)`

`hsl(180,50%,50%)`

`hsl(x,x,0%)`

`hsl(x,x,100%)`

`hsla(180,50%,50%,1.0)`，`hsla(180,50%,50%,100)`

`hsla(180,50%,50%,0.5)`

`hsla(0,0%,0%,0.0)`，`hsla(0,0%,0%,-100)`

验证CSS颜色名称

无效输入

redd，#f0gf0g，#1234，f00，rgb(1,2)，rgb(1,2,3.0)，rgb(1,2,3,4)，rgba(100,150,200)

有效输入

aqua

pink

#f00，#ff0000，rgb(255,0,0)

rgba(255,0,0,1.0)，rgba(255,0,0,100)

rgba(0,0,255,0.0)，rgba(0,0,255,-100)

rgba(0,0,0,0)，rgba(0,0,0,-100)

hsl(180,50%,50%)

hsl(x,x,0%)

hsl(x,x,100%)

hsla(180,50%,50%,1.0)，hsla(180,50%,50%,100)

hsla(180,50%,50%,0.5)

hsla(0,0%,0%,0.0)，hsla(0,0%,0%,-100)

相关推荐

`redd`，`#f0gf0g`，`#1234`，`f00`，`rgb(1,2)`，`rgb(1,2,3.0)`，`rgb(1,2,3,4)`，`rgba(100,150,200)`

`aqua`

`pink`

`#f00`，`#ff0000`，`rgb(255,0,0)`

`rgba(255,0,0,1.0)`，`rgba(255,0,0,100)`

`rgba(0,0,255,0.0)`，`rgba(0,0,255,-100)`

`rgba(0,0,0,0)`，`rgba(0,0,0,-100)`

`hsl(180,50%,50%)`

`hsl(x,x,0%)`

`hsl(x,x,100%)`

`hsla(180,50%,50%,1.0)`，`hsla(180,50%,50%,100)`

`hsla(180,50%,50%,0.5)`

`hsla(0,0%,0%,0.0)`，`hsla(0,0%,0%,-100)`