网页颜色检索适用于 jQuery，但不适用于 javascript

Question

我创建了一个 jQuery 函数来检索网页中使用的颜色：

$('*').each(function(i, el){    

var $element = $(el),
color = $element.css('background-color');

if(!~$.inArray(color, colors))
    colors.push(color);

});

它对我来说很好用。 现在我需要将此代码转换为纯 javascript，然后我写了这个：

var elements = Array.prototype.slice.call(document.getElementsByTagName('*')),
len = elements.length,
i, node, color;

for (i = 0; i < len; i++) {
 node = elements[i];
 color = node.style.backgroundColor;

 if (color && !~colors.indexOf(color)) {
  colors.push(color);
 }
}

但元素 node.style.backgroundColor 永远是空的，对于每个元素，就像在这个屏幕截图中一样

为什么在 jquery 中一切都已完成，而使用 javascript 转换脚本却不能正常工作？

Answer 1

您应该对 css 样式使用 getComputedStyle 方法，因为 node.style.backgroundColor 仅适用于内联样式（如本问题 Javascript - getting the background color of the hovered element 中所建议的那样）

//try this
getComputedStyle(target).backgroundColor