验证css颜色名称

Question

我写了一个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;
};

Answer 1

当相关字符串与测试颜色颜色相同时,此页面上发布的所有解决方案都不正确.当然,你可以使用一种非常不可能的颜色选择,但我宁愿选择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/

Answer 2

我知道这个问题相当陈旧,但我提出了一个纯粹的javascript解决方案,用于检查颜色,这似乎适用于每个浏览器,并希望分享它

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

function getColorCSS(c) {
    var ele = document.createElement("div");
    ele.style.color = c;
    return ele.style.color.replace(/\s+/,'').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
  • ...火狐
  • . . . internet explorer

 

VALID INPUTS

• 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转换rgba为rgbalpha 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)...Internet Explorer也是如此

 

• rgba(0,0,0,0), rgba(0,0,0,-100)

  • rgba(0,0,0,0)...铬
  • transparent...firefox只转换这一个rgba实例,所有参数都设置为0单词transparent(奇怪)
  • 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将任何hsl表示转换black为此

 

• hsl(x,x,100%)

  • rgb(255,255,255)...铬
  • rgb(255,255,255)...火狐
  • hsl(0,0%,100%)...Internet Explorer将任何hsl表示转换white为此

 

• 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 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;">&#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>

Answer 3

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

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

Answer 4

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>

它是匆匆写的,但它的工作原理.