backgroundColorを取得し、ループした要素で表示

Question

私はクラス.paletteSqのすべての要素を持っていて、それぞれ異なる背景色を使用しています。

私は、一つ一つを通過し、スパンの中に、背景色値、進コードを表示するには、ループを使用しています：

var i, len; 
var tiles = document.querySelectorAll(".paletteSq"); 
function displayColor(){ 
    for(i = 0, len = tiles.length; i < len; i++){ 
     function rgbToHex(color) 
     { 
      if(color.charAt(0)=='r') 
      { 
       color=color.replace('rgb(','').replace(')','').split(','); 
       var r=parseInt(color[0], 10).toString(16); 
       var g=parseInt(color[1], 10).toString(16); 
       var b=parseInt(color[2], 10).toString(16); 
       r=r.length==1?'0'+r:r; g=g.length==1?'0'+g:g; b=b.length==1?'0'+b:b; 
       var colHex='#'+r+g+b; 
       return colHex; 
      } 
     } 
     var color = tiles[i].style.backgroundColor; 

     tiles[i].innerHTML = '<span class="hex">' +rgbToHex(color)+ '</span>'; 
    } 
} 
displayColor(tiles); 

それはしかし働いていません。コンソールエラーはありません。私は唯一のundefinedは、各要素の横のスパンに16進数のカラーコードの代わりに表示されます。

誰かが間違っているのを見ることができますか？

Answer 1

var color = window.getComputedStyle(tiles[i]).backgroundColor; 

el.style.backgroundColorいかなる場合にのみ、あなたが要素の実際のスタイル属性に設定された値を返します。 実際のスタイリングを使用するには、window.getComputedStyle()