正在验证css颜色名称
正在验证css颜色名称
提问于 2011-06-17 20:59:17
我已经写了一个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;
};回答 6
Stack Overflow用户
回答已采纳
发布于 2013-06-08 07:02:02
当问题字符串的颜色与测试颜色相同时，本页上发布的所有解决方案都是不正确的。诚然，你可以使用一个非常不可能的颜色选择，但我更喜欢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)";
}Stack Overflow用户
发布于 2011-06-17 21:06:24
您可以简单地将颜色设置为一个虚拟元素，然后检查该元素的值是否不是白色。
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');
}Stack Overflow用户
发布于 2011-06-17 21:05:50
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>
它是仓促编写的，但它是有效的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6386090
复制相关文章
相似问题
腾讯云开发者
