使用純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屬性值相同

回答

相關問題