使用纯Js或jquery获得64个类的相同CSS属性值

Question

I have created 64 color buttons in dom by js. they have class name like this:

c1
c2
c3
c4

and so on..

I have created this by this codes:

var eg_color_ul_1 = $('.eg-ul-1');
var eg_color_ul_2 = $('.eg-ul-2');

for (var linum = 1; linum < 65; linum++) {
    var Cselector = ".c" + linum;
    var colorMenu = $(Cselector).css( "background-color" );

    eg_color_ul_1.append("<a class=\"c" + linum + "\" color-code=\""+ colorMenu +"\"></a>"),
    eg_color_ul_2.append("<a class=\"c" + linum + "\" color-code=\""+ colorMenu +"\"></a>");

}

I have already set all color in css style sheet. like this:

.c1 {
    background-color: #F44336;
}
.c2 {
    background-color: #E91E63;
}
.c3 {
    background-color: #9C27B0;
}
.c4 {
    background-color: #673AB7;
}

Now i dont get the color in dom. it show color-code="undefined"

How can I fix it?

I am sorry for the title. I can't understand what should be the title. So I put this.

Edit:
Due to a answer from @Abdul I have corrected my js. But still it shows color-code="undefined" . When I console log this it shows

rgb(244, 67, 54)                                              main.js:10 
63 undefined                                                  main.js:10

Answer 1

this line is wrong:

var colorMenu = $(Cselector).css( "background-color" );

should be:

var colorMenu = $('.' + Cselector).css( "background-color" );

OR keep your line but change this:

var Cselector = ".c" + linum;
                 ^ notice the period

see this fiddle

I would also refactor your code:

https://jsfiddle.net/6551a0ku/2/

var eg_color_ul_1 = $('.eg-ul-1');
var eg_color_ul_2 = $('.eg-ul-2');

for (var linum = 1; linum < 5; linum++) {
    var className = 'c' + linum;
    var Cselector = '.' + className;
    var colorMenu = $(Cselector).css( "background-color" );

    eg_color_ul_1.append(getATag(className, colorMenu)),
    eg_color_ul_2.append(getATag(className, colorMenu));

}

function getATag(className, colorMenu) {
  var aTag = "<a class='"
  + className
  + "' color-code='"
  + colorMenu 
  + "'>a</a>";
  return aTag;
}

Answer 2

I think there is a misunderstanding of where jQuery will pull the background-color property from. The DOM/jQuery doesn't have a direct understanding of the CSS properties you set down until you associate them with a DOM element either in the actual DOM, or in a Document Fragment.

var eg_color_ul_1 = $('.eg-ul-1');
var eg_color_ul_2 = $('.eg-ul-2');

for (var linum = 1; linum < 65; linum++) {
    var Cselector = ".c" + linum;
    // the problem is here, at this point, there are no dom elements that match .cN so there is no value to return
    var colorMenu = $(Cselector).css( "background-color" );

    eg_color_ul_1.append("<a class=\"c" + linum + "\" color-code=\""+ colorMenu +"\"></a>"),
    eg_color_ul_2.append("<a class=\"c" + linum + "\" color-code=\""+ colorMenu +"\"></a>");

}

You can fix this by appending the anchor tags to the DOM first and then assigning the color code attribute.

var eg_color_ul_1 = $('.eg-ul-1');
var eg_color_ul_2 = $('.eg-ul-2');

for (var linum = 1; linum < 65; linum++) {
    eg_color_ul_1.append("<a class=\"c" + linum + "\"></a>"),
    eg_color_ul_2.append("<a class=\"c" + linum + "\"></a>");
}

for (var linum = 1; linum < 65; linum++) {
    var domElement = $(".c" + linum)
    var colorMenu = domElement.css("background-color")
    domElement.attr('color-code', colorMenu)
}

Answer 3

I am unfamiliar with JQuery but if element.css("property") is the equivalent of element.style.property then that's your problem, the style there is referring to the inline style attribute and, as you are using a stylesheet, this is returning nothing.

The solution is to instead use getComputedStyle() , like so:

var eg_color_ul_1=$(".eg-ul-1");
var eg_color_ul_2=$(".eg-ul-2");
for(var linum=1;linum<65;linum++){
  var colorMenu=window.getComputedStyle($(".c"+linum),null).getPropertyValue("background-color");
  eg_color_ul_1.append("<a class=\"c"+linum+"\" data-color-code=\""+colorMenu+"\"></a>");
  eg_color_ul_2.append("<a class=\"c"+linum+"\" data-color-code=\""+colorMenu+"\"></a>");
}

I'd also suggest using data attributes rather than custom attributes to avoid any potential issues.