我正在嘗試創建一個循環來查看系列中的每個div，並將該div的背景色作爲文本添加到它。它對第一個項目正常工作，但爲每個後續元素返回rgba（0,0,0,0）。有問題的jQuery是下方，codepen的例子是：http://codepen.io/cvasquez/pen/RomWQw爲什麼jQuery css。（backgroundColor）返回rgba（0,0,0,0）？
$('.color-block').each(function(){
var colorRgb = $(this).css('background-color');
$(this).append('</br>' + colorRgb);
});
嘗試，這樣的：
setTimeout(function($this){
var colorRgb = $this.css('backgroundColor');
$this.append('</br>' + colorRgb);
}, 100, $this)
全碼：
// var colors = ['purple', 'blue','teal', 'green','yellow','coral','red','gray'];
var colors = ['red', 'coral','yellow','green','teal','blue','purple','gray'];
var sizes = ['50','100','200','300','400','500','600','700','800'];
$(document).ready(function(){
$('#palette').empty();
$.each(sizes, function(i, val){
$('#starter').append('<div data-step="' + val + '" class="color-block"></div>')
});
$.each(colors, function(i, val){
$('#starter').clone().prop('id', val).appendTo('#palettes');
$('#' + val + ' .color-block').data('color', val);
});
$('#starter').remove();
$('.color-block').each(function(){
var $this = $(this),
step = $this.data('step'),
colorName = $this.data('color');
$this.addClass('bg-' + colorName + '-' + step);
$this.append('bg-' + colorName + '-' + step);
setTimeout(function($this){
var colorRgb = $this.css('backgroundColor');
$this.append('</br>' + colorRgb);
}, 100, $this)
});
});html, body {
font-family: arial, sans-serif;
font-size: 14px;
height: 100%;
margin: 0;
width: 100%;
}
#palettes {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
position: relative;
width: 100%;
}
.palette {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.color-block {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 20px;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
.bg-purple-50 {
background: #efe7fe;
}
.bg-purple-100 {
background: #c19ff9;
}
.bg-purple-200 {
background: #a16ff6;
}
.bg-purple-300 {
background: #823ff3;
}
.bg-purple-400 {
background: #630ff0;
}
.bg-purple-500 {
background: #4f0cc0;
}
.bg-purple-600 {
background: #3b0990;
}
.bg-purple-700 {
background: #280660;
}
.bg-purple-800 {
background: #140330;
}
.bg-blue-50 {
background: #e7f5fe;
}
.bg-blue-100 {
background: #9fd6f9;
}
.bg-blue-200 {
background: #6fc2f6;
}
.bg-blue-300 {
background: #3fadf3;
}
.bg-blue-400 {
background: #0f99f0;
}
.bg-blue-500 {
background: #0c7ac0;
}
.bg-blue-600 {
background: #095c90;
}
.bg-blue-700 {
background: #063d60;
}
.bg-blue-800 {
background: #031f30;
}
.bg-teal-50 {
background: #e7fcfe;
}
.bg-teal-100 {
background: #9ff4f9;
}
.bg-teal-200 {
background: #6feff6;
}
.bg-teal-300 {
background: #3fe9f3;
}
.bg-teal-400 {
background: #0fe4f0;
}
.bg-teal-500 {
background: #0cb6c0;
}
.bg-teal-600 {
background: #098990;
}
.bg-teal-700 {
background: #065b60;
}
.bg-teal-800 {
background: #032e30;
}
.bg-green-50 {
background: #ebf9f2;
}
.bg-green-100 {
background: #b0e9ca;
}
.bg-green-200 {
background: #88ddb0;
}
.bg-green-300 {
background: #60d295;
}
.bg-green-400 {
background: #38c77b;
}
.bg-green-500 {
background: #2d9f62;
}
.bg-green-600 {
background: #22774a;
}
.bg-green-700 {
background: #175031;
}
.bg-green-800 {
background: #0b2819;
}
.bg-yellow-50 {
background: #fff3db;
}
.bg-yellow-100 {
background: #ffdb8e;
}
.bg-yellow-200 {
background: #ffcb5b;
}
.bg-yellow-300 {
background: #ffbb28;
}
.bg-yellow-400 {
background: #f4a700;
}
.bg-yellow-500 {
background: #c18400;
}
.bg-yellow-600 {
background: #8e6100;
}
.bg-yellow-700 {
background: #5b3e00;
}
.bg-yellow-800 {
background: #281b00;
}
.bg-coral-50 {
background: #feede7;
}
.bg-coral-100 {
background: #f9b69f;
}
.bg-coral-200 {
background: #f6926f;
}
.bg-coral-300 {
background: #f36d3f;
}
.bg-coral-400 {
background: #f0490f;
}
.bg-coral-500 {
background: #c03a0c;
}
.bg-coral-600 {
background: #902c09;
}
.bg-coral-700 {
background: #601d06;
}
.bg-coral-800 {
background: #300f03;
}
.bg-red-50 {
background: #fceff0;
}
.bg-red-100 {
background: #f1aeb0;
}
.bg-red-200 {
background: #e98385;
}
.bg-red-300 {
background: #e1585b;
}
.bg-red-400 {
background: #d92d30;
}
.bg-red-500 {
background: #b32023;
}
.bg-red-600 {
background: #88181b;
}
.bg-red-700 {
background: #5c1112;
}
.bg-red-800 {
background: #31090a;
}
.bg-gray-50 {
background: #f0f3f5;
}
.bg-gray-100 {
background: #c3ced5;
}
.bg-gray-200 {
background: #a5b6c0;
}
.bg-gray-300 {
background: #879dab;
}
.bg-gray-400 {
background: #698596;
}
.bg-gray-500 {
background: #546a78;
}
.bg-gray-600 {
background: #3f505a;
}
.bg-gray-700 {
background: #2a353c;
}
.bg-gray-800 {
background: #151b1e;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="palettes">
<div class="palette" id="starter">
</div>
</div>
HTTP：/ /stackoverflow.com/questions/5999209/how-to-get-the-background-color-code-of- an-element –
@ThomasJuranek該鏈接顯示如何獲取十六進制中的顏色。 OP要它作爲RGB（）。 –
它是因爲你在應用這個類，然後試圖太快地獲取這個值。 DOM需要更新到新的樣式，這不會發生，因爲您在設置類後嘗試獲取值。 http://codepen.io/anon/pen/JbqKNm –