Question

我用ds在dom中创建了64个颜色按钮。他们有这样的班级名字：

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

Answer 1

这条线错了：

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

应该是：

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

或保留您的行，但更改此内容：

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

Answer 2

我认为有一个误解，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)
}

Answer 3

我不熟悉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而不是自定义属性来避免任何潜在问题。

使用纯Js或jquery

3 个答案: