Question

I define Color in CSS file

 .level1 {
color: ["#7FFF00", "#00CA9A", "#2CB371", "#124B21","#006400"];
}
  .level2 {
color: ["#7FFF01", "#00FA8A", "#1CB371", "#328B22","#006400"];
 }            

Now I want to read those color from the javascript JS file

   var color = $(".level1").css("color");
   var color2 = $(".level2").css("color");

and I got null in color
Could you explain me what I did wrong ?

Did the define of the colors are correct ?

Answer 1

The problem is that your color declaration is syntactically wrong. You are trying to declare something that looks like an array of colors, which isn’t supported in CSS. The browser will ignore rules it cannot understand, therefor the colors does not get applied.

Since it doesn’t get applied, jQuery cannot find a value for the color-property of that element, thus returning null.

If you fix the color declaration, providing only a single color:

.level1 {
    color: #7FFF00;
}

Your jQuery code will work just fine.