Javascript - check if string is valid CSS color?

Question

If a color string is a number, then we can use a RegExp to check if it\'s a valid CSS color. But what if it\'s a word?

I have code that generates contro

Answer 1

The input is often incorrect with the output. If you check the length of the values, you get either an empty string or a value in the CSS2 tree

function isColor(string) {
    var s = new Option().style;
    s.color = string;
    return s.color.length > 0;
}

Answer 2

I'm developing an application accepting color names or hex colors. dandavis' answer works just fine for the color names but does not work for hex colors. The value stored in s.color (when assigning '#ff0000') is a RGB code (in this case rgb(255, 0, 0)). Therefore, the comparison s.color == strColor returns false.

Therefore, you need to combine dandavis' solution and the solution given here.

Could look like this:

function isColor(strColor){
  var s = new Option().style;
  s.color = strColor;
  var test1 = s.color == strColor;
  var test2 = /^#[0-9A-F]{6}$/i.test(strColor);
  if(test1 == true || test2 == true){
    return true;
  } else{
    return false;
  }
}

Answer 3

The accepted answer is almost correct, but some color values will be converted on some browsers -- at least Chrome converts hex RGB values #000000 to rgb(0, 0, 0).

However, if you set the style.color to an invalid value, you will get an empty string when checking it:

const isColor = (strColor) => {
  const s = new Option().style;
  s.color = strColor;
  return s.color !== '';
}

Answer 4

<p class="red"></p>
<p class="yellow"></p>
<p class="white"></p>

$(funtion(){
var obj = $("p");
var ex = $(obj).eq(1);

   $("button").click(funtion(){
   alert(obj);
  });
});

Does this solve the problem?

Answer 5

Here's a simple function that checks color name support in the current browser:

function isColor(strColor){
  var s = new Option().style;
  s.color = strColor;
  return s.color == strColor;
}

// try it out
isColor("red");   // true
isColor("reds");  // false

Since an invalid CSS property value will not persist, we can compare an attempted set value with the value we meant to set, and if they match, we know the color/property is valid.

Note this will also approve hex, RGB, etc. You can screen those out with a RegExp or two if that's an issue for your application.

Answer 6

Here is a generic solution to test any CSS property value:

function validCssValue(cssProp,val){
    if(cssProp == "length") return false;
    if(val == "") return true;
    var style = new Option().style;
    if(style[cssProp] != "") return false;
    style[cssProp] = val;
    return style[cssProp] !== "";
}

All properties of new Option().style will be empty when created. Only valid values will update a property, so invalid values will leave the property empty. (Length is a property of the style object, but not a CSS property, so we need to reject trying to test it.)