validationcss颜色名称
我写了一个jQuery插件，它接受一些参数的css颜色。
我想validation它们。 如果它只是一个hex或rgb值，我可以使用正则表达式，但如何validation所有147个有效的颜色名称而不膨胀该插件？
我想知道是否有某种方法尝试应用样式（可能使用jquery）然后如果它无效则从浏览器中捕获错误？
编辑：powtac和Pantelis提出了一个解决方案，但他们都错过了边缘情况，所以我在这里包括一个完整的解决方案：
var validateCssColour = function(colour){ var rgb = $(''); // 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; };
当相关字符串与测试颜色颜色相同时，此页面上发布的所有解决方案都不正确。 当然，你可以使用一种非常不可能的颜色选择，但我宁愿选择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/
我知道这个问题相当陈旧，但我提出了一个纯粹的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)
有效输入
-
aqua
-
aqua 。 。 铬
-
aqua 。 。 火狐
-
aqua 。 。 IE浏览器
-
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 。 。 。 火狐
-
pink 。 。 。 IE浏览器
-
#f00 ， #ff0000 ， rgb(255,0,0)
-
rgb(255,0,0) 。 。 。 铬
-
rgb(255,0,0) 。 。 。 火狐
-
rgb(255,0,0) 。 。 。 IE浏览器
-
rgba(255,0,0,1.0) ， rgba(255,0,0,100)
-
rgb(255,0,0) 。 。 。 chrome随时将alpha转换为rgba为rgb为1.0或更大，因为它完全不透明（可能是为了性能）
-
rgb(255,0,0) 。 。 。 firefox与chrome做同样的事情
-
rgba(255,0,0,1) 。 。 。 Internet Explorer将alpha参数从1.0或更高转换为1
-
rgba(0,255,0,0.5)
-
rgba(0,255,0,0.498039) 。 。 。 chrome返回与其他浏览器不同的东西（可能是性能的交易准确性）
-
rgba(0,255,0,0.5) 。 。 。 火狐
-
rgba(0,255,0,0.5) 。 。 。 IE浏览器
-
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) 。 。 。 互联网浏览器做同样的事情
-
rgba(0,0,0,0) ， rgba(0,0,0,-100)
-
rgba(0,0,0,0) 。 。 。 铬
-
transparent 。 。 。 firefox只将这一个rgba实例转换为所有参数设置为0的单词transparent （strange）
-
rgba(0,0,0,0) 。 。 。 IE浏览器
-
hsl(180,50%,50%)
-
rgb(63,191,191) 。 。 。 铬
- ff
rgb(63,191,191) 。 。 。 火狐
- 即
hsl(180,50%,50%) 。 。 。 IE浏览器
-
hsl(x,x,0%)
-
rgb(0,0,0) 。 。 。 铬
-
rgb(0,0,0) 。 。 。 火狐
-
hsl(0,0%,0%) 。 。 。 Internet Explorer将任何black hsl表示转换为此
-
hsl(x,x,100%)
-
rgb(255,255,255) 。 。 。 铬
-
rgb(255,255,255) 。 。 。 火狐
-
hsl(0,0%,100%) 。 。 。 Internet Explorer将任何white hsl表示转换为此
-
hsla(180,50%,50%,1.0) ， hsla(180,50%,50%,100)
-
rgba(63,191,191,1) 。 。 。 铬
-
rgba(63,191,191,1) 。 。 。 火狐
-
hsla(180,50%,50%,1) 。 。 。 IE浏览器
-
hsla(180,50%,50%,0.5)
-
rgba(63,191,191,0.498039) 。 。 。 铬
-
rgba(63,191,191,0.5) 。 。 。 火狐
-
hsla(180,50%,50%,0.5) 。 。 。 IE浏览器
-
hsla(0,0%,0%,0.0) ， hsla(0,0%,0%,-100)
-
rgba(0,0,0,0) 。 。 。 铬
-
transparent 。 。 。 firefox是一致的，但这种转换似乎仍然很奇怪
-
hsla(180,50%,50%,0) 。 。 。 IE浏览器
哇，我简直不敢相信我只花了2个小时在不同的浏览器中测试这个function！
我想我也可以使用该function演示，而我正在使用它…
function getColorCSS(c) { var ele = document.createElement("div"); ele.style.color = c; return ele.style.color.split(/\s+/).join('').toLowerCase(); } function isColorValid(c) { var s = getColorCSS(c); return (s) ? true : false; } function isColorTransparent(c) { var s = getColorCSS(c); return ( s === "transparent" || s.substring(0,4) === "rgba" && +s.replace(/^.*,(.+)\)/,'$1') <= 0 || s.substring(0,4) === "hsla" && +s.replace(/^.*,(.+)\)/,'$1') <= 0 ); } function isColorWhite(c) { var s = getColorCSS(c); return [ "white", "rgb(255,255,255)", "rgba(255,255,255,1)", "hsl(0,0%,100%)", "hsla(0,0%,100%,1)" ].indexOf(s) > -1; } function isColorBlack(c) { var s = getColorCSS(c); return [ "black", "rgb(0,0,0)", "rgba(0,0,0,1)", "hsl(0,0%,0%)", "hsla(0,0%,0%,1)" ].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 = 'TRANSPARENT'; } else if (isColorWhite(c)) { document.getElementsByTagName("body")[0].style.backgroundColor = getColorCSS(c); document.getElementById("result").innerHTML = 'WHITE'; } else if (isColorBlack(c)) { document.getElementsByTagName("body")[0].style.backgroundColor = getColorCSS(c); document.getElementById("result").innerHTML = 'BLACK'; } 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 = '☹'; } } 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; }
您可以简单地将颜色设置为虚拟元素，然后检查元素的值是否为白色以外的值。
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'); }
function test(myColor) { var valid = $('#test').css('color'); $('#test').css('color', myColor); if (valid == $('#test').css('color')) alert("INVALID COLOR"); else { alert("VALID"); $('#test').css('color', valid); } } test("TATATA"); test("white");
asdasdasdasd
我认为您可以使用此页面中的脚本完全按照您的要求执行操作：将字符串传递给它并尝试找出颜色。 好吧，这不是你想要做的，但它应该工作。
我认为无论如何在某些情况下你应该进行名称查找（我不认为有一些神奇的方法可以确定字符串“浅蓝色”中的hex值）所以只需抓住其他人所做的工作（脚本是Stoyan Stefanov，他非常擅长javascript，我从他那里读过一些好书，如果他做了查找，那么，我认为没有其他解决方案）