我编写了一个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;
};
答案 0 :(得分:25)
当相关字符串与测试颜色颜色相同时,此页面上发布的所有解决方案均不正确。当然,你可以使用一种非常不可能的颜色选择,但我宁愿选择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)";
}
答案 1 :(得分:23)
我知道这个问题相当陈旧,但我提出了一个纯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)
,{{ 1}} rgba(100,150,200)
。 。 。的铬强>
。 。 。的火狐强>
。 。 。 Internet Explorer
aqua
。 。 。的铬强> aqua
。 。 。的火狐强> aqua
。 。 。 Internet Explorer
aqua
pink
。 。 。 chrome 会将所有有效的html颜色名称转换为rgb格式,但以下17除外,我不确定为什么rgb(255,192,203)
["aqua", "black", "blue", "fuchsia", "gray", "green", "lime", "maroon", "navy", "olive", "orange", "purple", "red", "silver", "teal", "white", "yellow"]
。 。 。的火狐强> pink
。 。 。 Internet Explorer
pink
,#f00
,#ff0000
rgb(255,0,0)
。 。 。的铬强> rgb(255,0,0)
。 。 。的火狐强> rgb(255,0,0)
。 。 。 Internet Explorer
rgb(255,0,0)
,rgba(255,0,0,1.0)
rgba(255,0,0,100)
。 。 。 chrome 会随时将rgb(255,0,0)
转换为rgba
,而rgb
或更高,因为它完全不透明(可能是为了表现)1.0
。 。 。 firefox 与chrome rgb(255,0,0)
。 。 。 Internet Explorer 将Alpha参数从rgba(255,0,0,1)
或更高版本转换为1.0
1
rgba(0,255,0,0.5)
。 。 。 chrome 会返回与其他浏览器不同的内容(可能是交易的准确性)rgba(0,255,0,0.498039)
。 。 。的火狐强> rgba(0,255,0,0.5)
。 。 。 Internet Explorer
rgba(0,255,0,0.5)
,rgba(0,0,255,0.0)
rgba(0,0,255,-100)
。 。 。 chrome 将Alpha参数从rgba(0,0,255,0)
或更低版本转换为0.0
0
。 。 。 firefox 执行相同的操作rgba(0,0,255,0)
。 。 。 Internet Explorer 执行相同的操作
rgba(0,0,255,0)
,rgba(0,0,0,0)
rgba(0,0,0,-100)
。 。 。的铬强> rgba(0,0,0,0)
。 。 。 firefox 仅将所有参数设置为transparent
的{{1}}个实例转换为单词rgba
(奇怪)0
。 。 。 Internet Explorer
transparent
rgba(0,0,0,0)
。 。 。的铬强> hsl(180,50%,50%)
。 。 。的火狐强> rgb(63,191,191)
。 。 。 Internet Explorer
rgb(63,191,191)
hsl(180,50%,50%)
。 。 。的铬强> hsl(x,x,0%)
。 。 。的火狐强> rgb(0,0,0)
。 。 。 Internet Explorer 会将rgb(0,0,0)
的任何hsl表示转换为此
hsl(0,0%,0%)
black
。 。 。的铬强> hsl(x,x,100%)
。 。 。的火狐强> rgb(255,255,255)
。 。 。 Internet Explorer 会将rgb(255,255,255)
的任何hsl表示转换为此
hsl(0,0%,100%)
,white
hsla(180,50%,50%,1.0)
。 。 。的铬强> hsla(180,50%,50%,100)
。 。 。的火狐强> rgba(63,191,191,1)
。 。 。 Internet Explorer
rgba(63,191,191,1)
hsla(180,50%,50%,1)
。 。 。的铬强> hsla(180,50%,50%,0.5)
。 。 。的火狐强> rgba(63,191,191,0.498039)
。 。 。 Internet Explorer
rgba(63,191,191,0.5)
,hsla(180,50%,50%,0.5)
hsla(0,0%,0%,0.0)
。 。 。的铬强> hsla(0,0%,0%,-100)
。 。 。 firefox 是一致的,但这种转换似乎仍然很奇怪rgba(0,0,0,0)
。 。 。 Internet Explorer 哇,我简直不敢相信我只花了2个小时在不同的浏览器中测试这个功能!我想我也可以在演示时使用该功能演示......
transparent
hsla(180,50%,50%,0)
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 = '<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;">☹</span>';
}
}
var eventList = ["change", "keyup", "paste", "input", "propertychange"];
for(event of eventList) {
document.getElementById("c").addEventListener(event, function() {
checkColorString();
});
}
答案 2 :(得分:14)
您可以简单地将颜色设置为虚拟元素,然后检查元素的值是否为白色以外的值。
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');
}
答案 3 :(得分:7)
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");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">asdasdasdasd</div>
这是匆匆写的但是有效。
答案 4 :(得分:0)
我认为您可以使用此page中完全符合您要求的脚本:您将字符串传递给它并尝试找出颜色。好吧,这不是你想要做的,但它应该工作。
我认为无论如何在某些情况下你应该进行名称查找(我不认为有一些神奇的方法来确定字符串“浅蓝色”中的十六进制值)所以只需抓住其他人的工作已经完成了(剧本是Stoyan Stefanov,他非常擅长javascript,我从他那里读过一些好书,如果他进行查找,那么,我认为还有其他解决方案)
答案 5 :(得分:0)
疯狂的想法
function isValidCssColor(c){
// put !! to normalize to boolean
return [document.head.style.color = c, document.head.style.color][1];
}
我相信它可以正常工作(仅当您的页面没有head
元素时才有效)
答案 6 :(得分:0)
灵感来自瓦伦(Valen)的答案:
v=c=>((s=document.head.style).color=c,q=s.color,s.color='',!!q);
// v('red') => true
// v('reeeed') => false
更可读:
const validColor = c => {
document.head.style.color = c;
const q = document.head.style.color;
document.head.style.color = '';
return !!q
};