如果一个颜色字符串是一个数字,那么我们可以使用RegExp
来检查它是否是一个有效的CSS颜色。但如果是个词呢?
我有一段代码可以从颜色参数动态生成控件。但是,除了颜色之外,还可以有null
、""
或随机单词。有没有一种方法可以用JavaScript检查颜色名称?
**更新:**非常感谢您的精彩回答!:)我的最终版本如下(添加了toLowerCase()
检查,因为颜色可能是"Green"
,"Red"
等)。
function isValidColor(strColor) {
var s = new Option().style;
s.color = strColor;
// return 'false' if color wasn't assigned
return s.color == strColor.toLowerCase();
}
7条答案
按热度按时间0vvn1miw1#
公认的答案几乎是正确的,但某些颜色值将在某些浏览器上转换-至少Chrome将十六进制RGB值
#000000
转换为rgb(0, 0, 0)
。但是,如果您将
style.color
设置为无效值,则在检查时将获得空字符串:正如Jonh Smith在评论中指出的那样,上面还为关键字
unset
,initial
,inherit
返回true
。这些颜色是否应该算作有效颜色可能取决于应用程序/上下文”fnx2tebb2#
我需要验证CSS颜色和所有其他属性。我发现this wonderful solution更短,更健壮,因为它使用内置的Web APIs CSS.supports()方法。
wr98u20j3#
这里有一个简单的函数,可以检查当前浏览器中的颜色名称支持:
由于无效的CSS属性值不会持久,我们可以将尝试设置的值与我们想要设置的值进行比较,如果它们匹配,我们就知道color/属性是有效的。
注意,这也将批准十六进制,RGB等。如果对应用程序有问题,可以使用
RegExp
或两个选项将其筛选掉。pwuypxnk4#
我正在开发一个接受颜色名称或十六进制颜色的应用程序。dandavis的答案对于颜色名称很好,但对于十六进制颜色不起作用。存储在
s.color (when assigning '#ff0000')
中的值是RGB代码(在本例中为rgb(255, 0, 0)
)。因此,比较s.color == strColor
返回false
。因此,您需要将合并dandavis的解决方案和给定的解决方案here结合起来。
可能看起来像这样:
yb3bgrhw5#
下面是一个测试任何CSS属性值的通用解决方案:
new Option().style
的所有属性在创建时都将为空。只有有效的值才会更新属性,因此无效的值将使属性为空。(长度是样式对象的属性,但不是CSS属性,所以我们需要拒绝尝试测试它。jv2fixgn6#
输入常常与输出不一致。如果检查值的长度,则会得到空字符串或CSS2树中的值
2admgd597#
这能解决问题吗?