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

我在js中创建了64个颜色按钮。他们有一流的名字是这样的：
使用纯Js或jquery获取64个类的CSS属性值相同

c1 
c2 
c3 
c4

等..

我已经通过这个代码创建了这一点：

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>"); 

}

我已经设置在CSS样式表中的所有颜色。是这样的：

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

现在我没有得到dom的颜色。它显示color-code="undefined"

我该如何解决它？

我很抱歉的标题。我不明白应该是什么标题。所以我把这个。

编辑：
由于来自@Abdul的答案我纠正了我的js。但它仍然显示color-code="undefined"。当我的控制台登录这个就说明

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

来源

2016-04-26 Shohidul Alam

你有64个元素与页面上的这些类吗？如果你没有全部64个元素，你的循环的其余部分将不会从DOM中获取元素，因此将不会获得颜色 –

是的。我的网页里有64个li。 –

那么它不应该记录undefined –

此行是错误的：

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

应该是：

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

OR保持你的线，但改变这一点：

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

看到这个fiddle

我也重构代码：

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; 
}

来源

2016-04-26 16:00:51

感谢@Abdul提供的答案，我试过这个。但仍显示未定义。 –

在这里工作https://jsfiddle.net/6551a0ku/ –

请第二次看到问题。我编辑了这个问题。 –

我不熟悉JQuery的，但如果element.css("property")是element.style.property等效那么这是你的问题，style有指的是内嵌style属性，并且，因为您正在使用样式表，所以这不会返回任何内容。

解决的办法是改用getComputedStyle()，就像这样：

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>"); 
}

我也建议使用data attributes，而不是自定义属性，以避免任何潜在的问题。

来源

2016-04-26 16:14:05 Shaggy

我认为jQuery将从中提取背景色属性的位置存在误解。 DOM/jQuery不直接理解您设置的的CSS属性，直到将它们与实际DOM中或文档片段中的DOM元素相关联。

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>"); 

}

您可以通过附加锚标签的DOM第一和然后分配的颜色代码属性解决这个问题。

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) 
}

来源

2016-04-26 16:19:40 syazdani

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

回答

相关问题