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而不是十六进制颜色代码。

任何人都可以看到出了什么问题吗？

Answer 1

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

el.style.backgroundColor仅返回您在元素的实际样式属性上设置的值（如果有）。要获取实际样式，请使用window.getComputedStyle()

获取backgroundColor并在循环元素中显示

1 个答案: