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

Posted 2023-05-09

【中文标题】网页颜色检索适用于 jQuery，但不适用于 javascript

【英文标题】：Webpage color retrive work fine with jQuery but not with javascript

【发布时间】：2015-01-24 16:37:23

【问题描述】：

我创建了一个 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 转换脚本却不能正常工作？

【问题讨论】：

可能重复：***.com/questions/16892725/…

【参考方案1】：

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

//try this
getComputedStyle(target).backgroundColor