检查字符串是否是有效的 CSS 颜色表达式？ [复制]答案

【问题标题】：Check if string is a valid CSS color expression? [duplicate]检查字符串是否是有效的 CSS 颜色表达式？ [复制]
【发布时间】：2021-03-31 14:25:21
【问题描述】：

如果我有一个用作颜色的 CSS 代码字符串，是否可以检查值的有效性？

我想要的是：

一个函数或正则表达式，用于验证输入的代码是否为有效的 CSS 代码，当值为 linear-gradient、颜色名称为 red、十六进制、rgb、hsl 颜色或 @987654325 的 CSS 函数时，它返回 true @ 值，否则返回 false。

喜欢：

check('linear-gradient(140deg, rgba(0, 0, 0, 1) 0%, rgba(85, 85, 85, 1) 89%, rgba(153, 153, 153, 1) 100%)'); // should return true
check('#abcdzzff') // should return false
check('aquamarin') // should also return false (missing e)

谢谢。

【问题讨论】：

如果您可以访问 DOM（在浏览器上运行），您的问题的最佳答案似乎是 stackoverflow.com/questions/6386090/validating-css-color-names
@StefanWang 它适用于 rgb hsl 和其他功能，但不适用于 CSS 函数，你碰巧知道 CSS 函数的另一个代码吗？我对 2 个功能很好。
@StefanWang 所以我一直在搞乱那个代码，如果我不写image.style.color 而写image.style.background，它现在可以正常工作了。它不适用于rgb(0, 0, 0)，但您可以轻松地为它编写一个 if 案例。所以如果你在乎，请写一个答案，以便我标记它，谢谢。
你可以使用 image.style
How to check if css value is supported by the browser? 的副本。

标签： javascript css validation input

【解决方案1】：

由于@StefanWang 不想发布他的答案，我会自己发布。

这归功于他，谢谢 stefan。

let validate = c => {
    let img = document.createElement('img');
    img.style = 'background: rgb(0, 0, 0)';
    img.style = 'background: ' + c;
    if (img.style.background != 'rgb(0, 0, 0)' && img.style.background != '') return true;
    img.style = 'background: rgb(255, 255, 255)';
    img.style = 'background: ' + c;
    return (img.style.background != 'rgb(255, 255, 255)' && img.style.background != '');
}

console.log(validate('transparent')); // true
console.log(validate('hsl(30, 60%, 90%)')); // true
console.log(validate('linear-gradient(140deg, #000 0%, #666 90%, #ccc 100%)')); // true
console.log(validate('red')); // true
console.log(validate('#000')); // true
console.log(validate('#zzz')); // false

【讨论】：